如何使用JavaScript刪除有序列表？

Question

我在下面給出了2個代碼 -
代碼1：以下是我的代碼，該代碼使用querySelector選擇要刪除的類名稱。
但是它僅刪除第一個列表元素，而對於其余類也與第一個列表元素相同的名稱的列表不起作用。
為什么在刪除第一個列表元素后此方法不起作用（在刪除第一個列表元素之后，類名“ remove”也仍然存在並且不適用於它們）？

現在轉到代碼2來解決這個問題。

 //JAVASCRIPT ----CODE 1----- let ol = document.querySelector('.remove'); ol.addEventListener('click',function(e){ let length = document.querySelectorAll('li').length; if(length > 1){//ignore to remove all list let remove = e.target.parentNode; remove.parentNode.removeChild(remove); } }); 

 /* CSS*/ ol li { background-color: rgb(104, 144, 113); margin: 10px 0px; padding: 10px; max-width: 250px } li span.remove { float: right; font-size: 20px; font-weight: 1000; color: red; cursor: pointer; background-color: silver; display: inline-block; width: 23px; border-radius: 50px; text-align: center; } 

 <!-- HTML --> <div><p>click on minus icon to remove list item</p> <ol> <li>list1 <span class="remove"> - </span></li> <li>list2 <span class="remove"> - </span></li> <li>list3 <span class="remove"> - </span></li> <li>list4 <span class="remove"> - </span></li> <li>list5 <span class="remove"> - </span></li> </ol> </div> 

代碼2：代碼1的解決方案。
我在這里使用ol的有序列表的ol的 querySelector ，並且在querySelector的內部使用if(e.target.className == "remove")來刪除列表項。

 //JAVASCRIPT ----CODE 2----- let ol = document.querySelector('ol'); ol.addEventListener('click',function(e){ if(e.target.className == "remove"){ // only select element which has class name 'remove' let length = document.querySelectorAll('li').length; if(length > 1){ //ignore to remove all list let remove = e.target.parentNode; remove.parentNode.removeChild(remove); } } }); 

 /* CSS same as in code 1*/ ol li { background-color: rgb(104, 144, 113); margin: 10px 0px; padding: 10px; max-width: 250px } li span.remove { float: right; font-size: 20px; font-weight: 1000; color: red; cursor: pointer; background-color: silver; display: inline-block; width: 23px; border-radius: 50px; text-align: center; } 

 <!-- HTML same as in code 1--> <div><p>click on minus icon to remove list item</p> <ol> <li>list1 <span class="remove"> - </span></li> <li>list2 <span class="remove"> - </span></li> <li>list3 <span class="remove"> - </span></li> <li>list4 <span class="remove"> - </span></li> <li>list5 <span class="remove"> - </span></li> </ol> </div> 

幫幫我：但是我不想使用： document.querySelector('ol') ，它選擇了整個有序列表，這將浪費內存 。
我想實現只選擇類名“ remove”而不是整個有序列表的答案。

我們可以使用let ol = document.querySelectorAll('span.remove')來選擇類名稱“ remove”的所有元素，這些元素將作為數組存儲在變量ol中，但是在此之后如何選擇要刪除的數組元素呢？

Answer 1

您的代碼無法正常工作，因為在您的代碼中ol是類名稱為“ remove”的所有元素的集合。 因此，您不能像使用單個元素那樣使用它，您應該在ol上使用for循環來訪問類名稱為“ remove”的每個元素。

像這樣：

for (var i = 0; i < ol.length; i++) {
  ol[i].addEventListener('click', myFunction, false);
}

Answer 2

為什么第一個版本的代碼無法正確運行的答案是，因為您定義了let ol = document.querySelector('.remove'); 它僅使用該類的第一個元素，並將其放入加載頁面的內存中。 因此，當您將事件偵聽器添加到該事件偵聽器時，您只能將其分配給該元素，而該元素在刪除后將丟失。 這就是為什么它僅在第一個元素上起作用的原因。 您將必須使用document.querySelectorAll來獲得該類的所有元素，而不僅僅是第一個。

 //JAVASCRIPT ----CODE 1----- let ol = document.querySelectorAll('.remove'); ol.forEach(function(element){ element.addEventListener('click',function(e){ let length = document.querySelectorAll('li').length; if(length > 1){//ignore to remove all list let remove = e.target.parentNode; remove.parentNode.removeChild(remove); } }) }); 

 /* CSS*/ ol li { background-color: rgb(104, 144, 113); margin: 10px 0px; padding: 10px; max-width: 250px } li span.remove { float: right; font-size: 20px; font-weight: 1000; color: red; cursor: pointer; background-color: silver; display: inline-block; width: 23px; border-radius: 50px; text-align: center; } 

 <!-- HTML --> <div><p>click on minus icon to remove list item</p> <ol> <li>list1 <span class="remove"> - </span></li> <li>list2 <span class="remove"> - </span></li> <li>list3 <span class="remove"> - </span></li> <li>list4 <span class="remove"> - </span></li> <li>list5 <span class="remove"> - </span></li> </ol> </div> 

Answer 3

您可以這樣做刪除所有多余的代碼

 document.querySelectorAll('.remove').forEach((item) => { item.onclick = (event) => { let length = item.parentElement.parentElement.children.length; if (length > 1) { item.parentElement.outerHTML = "" } }; }); 

 /* CSS*/ ol li { background-color: rgb(104, 144, 113); margin: 10px 0px; padding: 10px; max-width: 250px } li span.remove { float: right; font-size: 20px; font-weight: 1000; color: red; cursor: pointer; background-color: silver; display: inline-block; width: 23px; border-radius: 50px; text-align: center; } 

 <!DOCTYPE html> <html> <div> <p>click on minus icon to remove list item</p> <ol> <li>list1 <span class="remove"> - </span></li> <li>list2 <span class="remove"> - </span></li> <li>list3 <span class="remove"> - </span></li> <li>list4 <span class="remove"> - </span></li> <li>list5 <span class="remove"> - </span></li> </ol> </div> </html> 

說明：

注意：每當您看到類似(item) => { etc.. }您都可以認為它是說function (item) { etc.. }

兩者是完全一樣的。

現在..

querySelectorAll選擇所有元素。

要遍歷它們，您可以執行.forEach()

在forEach內部必須是一個函數，該函數至少具有item作為參數，該參數表示要循環的項目

因此document.querySelectorAll("ol")返回所有OL標簽的列表

然后添加document.querySelectorAll("ol").forEach((item)=>{ /* item is now each OL element */ })

那么您可以執行document.querySelectorAll(".remove").forEach((item)=>{})來獲取與“ remove”類匹配的所有元素

最后，通過執行item.onclick = (event)=>{item.parentElement.parentElement.removeChild(item.parentElement); } ;，您只需使用.onclick綁定添加一個事件，該事件僅對該特定項目item.onclick = (event)=>{item.parentElement.parentElement.removeChild(item.parentElement); } item.onclick = (event)=>{item.parentElement.parentElement.removeChild(item.parentElement); } ，也可以是item.parentElement.outerHTML = "" ，它們都是相同的功能。