Question

我试图删除我点击的每个li。这是我的有序列表：

<ol id="list">
    <li id="0" class="newItems" onclick="Removeli();">G6000BJ</li>
    <li id="1" class="newItems" onclick="Removeli();">G6000Bk</li>
    <li id="2" class="newItems" onclick="Removeli();">G6000BN</li>
    <li id="3" class="newItems" onclick="Removeli();">G6000BW</li>
    <li id="4" class="newItems" onclick="Removeli();">G6000BT</li>
    <li id="5" class="newItems" onclick="Removeli();">G6000BR</li>
    <li id="6" class="newItems" onclick="Removeli();">G6000BE</li>
</ol>

这是我使用的jQuery代码：

function Removeli() {
    $('.newItems').click(function () {
        $(this).remove();
    });
}

但是当我点击它时，我无法删除最后一个。这意味着当我只剩下一个时，我无法删除它。但其他一切都很好。我做错了什么？

Answer 1

你正在混合内联JS和jQuery事件绑定。发生的事情是，当您单击一个元素时，它会调用onclick处理程序，然后绑定所有jQuery click处理程序。下次单击某个内容时，它再次调用removbeIt()，再次绑定jQuery处理程序，然后调用jQuery处理程序。但是第一次没有调用jQuery处理程序，因为它尚未绑定到元素。

你不应该在元素中有onclick属性，只需将事件绑定放在$(document).ready()处理程序中：

$(document).ready(function() {
    $('.newItems').click(function () {
        $(this).remove();
    });
});

此外，如果您要动态创建元素，则需要使用事件委派而不是绑定。

$(document).ready(function() {
    $("#list").on("click", ".newItems", function () {
        $(this).remove();
    });
});

请参阅Event binding on dynamically created elements?

Answer 2

将该功能传递给事件处理

$('.newItems').click(function() {
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="list">
  <li id="0" class="newItems">G6000BJ</li>
  <li id="1" class="newItems">G6000Bk</li>
  <li id="2" class="newItems">G6000BN</li>
  <li id="3" class="newItems">G6000BW</li>
  <li id="4" class="newItems">G6000BT</li>
  <li id="5" class="newItems">G6000BR</li>
  <li id="6" class="newItems">G6000BE</li>
</ol>

jQuery - 删除列表项

2 个答案: