Question

I have the following list and would like to remove an element from it. In this particular instance I would like to remove the second element:

<a id="q1" rel="1" class="pagenum" href="#">2</a>

And here’s the code for the list:

        <div id="carousel">
        <ul class="overview">
          <li id="l1">
              <a id="q0" rel="0" class="pagenum" href="#">1</a>
              <a id="q1" rel="1" class="pagenum" href="#">2</a>
              <a id="q2" rel="2" class="pagenum" href="#">3</a>
              <a id="q3" rel="3" class="pagenum" href="#">4</a>
              <a id="q4" rel="4" class="pagenum" href="#">5</a>                
          </li>
         </ul>
        </div>

Thanks, in advance.

EDIT: I was hoping to use something along the lines of $.each:

$("carousel li").each(function(index){
   if(index == SOME_NUM){
       this.remove()
   }
 });

However this doesn’t seem to work.

ADDITIONAL EDIT:

Thanks and apologies to all those who answered. I did not phrase my question correctly. I did find the remove() function prior to posting here – it is well documented on google :). However, I am trying to loop through the elements of the “li” and then remove particular elements via a $.each loop.

Thanks for any and all additional replies.

Answer 1

I think this should do what you want it to do.

$counter = 0;
$("#carousel li").each(function(){
    if($counter == SOME_NUM)
    {
        this.remove();
    }
    $counter++;
});

You’ll want to use jquery $variables here rather than javascript vars because javascript vars are function scoped, while the $variables are document scoped.