CODEWITHSUNDEEP
jquery
job
job

Reputation: 29

Remove list items with jQuery

I have a list where I want to remove the first list item from when clicked on a button

HTML code

<div id="vakjesdiv">
    <ul>
        <li class="verwijder">
            <img class="aanbieding" src="images/jack.png" /><span id="timer"></span>

        </li>
        <li class="verwijder">
            <img class="aanbieding" src="images/kpn.png" /><span id="timer2"></span>
        </li>
        <li class="verwijder">
            <img class="aanbieding" src="images/mac.png" />
        </li>
        <li class="verwijder">
            <img class="aanbieding" src="images/pathe.png" />
        </li>
    </ul>
</div>
<button id="testbutton">Button</button>

jQuery code

//AANBIEDING VERWIJDEREN

$("button").click(function () {
    $(".verwijder").remove();
});

I've tried different things but I cant find the problem. Anyone able to help me out? :)

Thanks

Upvotes: 1

Views: 75

Answers (5)

dfsq
dfsq

Reputation: 193251

Simply:

$("#vakjesdiv .verwijder:first").remove();

Upvotes: 0

Vadim S
Vadim S

Reputation: 358

Try this to remove first list item:

 $( ".verwijder" ).first().remove();

Upvotes: 0

hamedbahrami
hamedbahrami

Reputation: 38

with $( ".verwijder" ).remove(); you delete all list items. You want to use $( ".verwijder:first-child" ).remove(); or $( ".verwijder" ).first().remove(); to remove the first list item only per click.

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Try this

$("ul .verwijder:first-child").remove();

This will remove the first child that meets the select statement.

jQuery first-child selector: http://api.jquery.com/first-child-selector/

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You want to remove first li item then you can use jquery .eq():

$("button").click(function () {
    $(".verwijder").eq(0).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vakjesdiv">
    <ul>
        <li class="verwijder">
            <img class="aanbieding" src="images/jack.png"><span id="timer"></span>
        </li>
        <li class="verwijder">
            <img class="aanbieding" src="images/kpn.png"> <span id="timer2"></li>
    <li class="verwijder"><img class="aanbieding" src="images/mac.png"></li>
    <li class="verwijder"><img class="aanbieding" src="images/pathe.png"></li>
  </ul>
 </div>

 <button id="testbutton">Button</button>

Upvotes: 5

Related Questions