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>