使用jQuery删除列表项

Question

我有一个列表,我想从单击按钮时删除第一个列表项

HTML代码

<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代码

//AANBIEDING VERWIJDEREN

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

我尝试了不同的东西,但我找不到问题.有人能帮帮我吗？:)

谢谢

Answer 1

你想删除第一li项,然后你可以使用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>