使用jQuery删除列表项

Question

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

Answer 1

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> 

Answer 2

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/

Answer 3

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.

Answer 4

尝试执行以下操作删除第一个列表项：

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

Answer 5

只是：

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