jQuery - 删除列表项

Question

我试图删除每个我点击。这是在有序的名单上有：

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