CODEWITHSUNDEEP
javascriptjquery
Irene T.
Irene T.

Reputation: 1393

Remove a <li> when pressing a span

I am trying to fadeOut some <li>, but without luck. Check my code bellow:

<li class="lclass" id="1">
    First Li
    <span class="removeit" id="1" style="color:#C00;">Remove</span>
</li>
<li class="lclass" id="2">
    First Li
    <span class="removeit" id="2" style="color:#C00;">Remove</span>
</li>
<li class="lclass" id="3">
    First Li
    <span class="removeit" id="3" style="color:#C00;">Remove</span>
</li>

With my code, only the span class="removeit" fades out. I want to fade out the whole div when i am press the remove button.

$(document).ready(function() {
    $('.removeit').click(function () {
        $(this).hide("fast");   
    });
});

Thank you!

Upvotes: 1

Views: 106

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82241

use .parent() or .closest('li') to get parent li and then hide the whole object.like this: 

 $(document).ready(function() {
   $('.removeit').click(function () {
     $(this).parent().hide("fast");  //or $(this).closest('li').hide("fast");
   });
 });

Working Demo

Upvotes: 4

Felix
Felix

Reputation: 38112

You can use .parent() or .closest() to get the parent li element in your case then you can use fadeOut to fade out the matching li:

$('.removeit').click(function () {
    $(this).closest('li').fadeOut();   
});

Fiddle Demo

Also, you should use class instead of id because id is unique:

<li class="lclass 1">
<span class="removeit 1" style="color:#C00;">

Besides that, number is not a valid id, you can use li1,li2, span1, span2... instead:

<li class="lclass span1">
<span class="removeit span1" style="color:#C00;">

Upvotes: 2

Related Questions