如何使用 Javascript 删除有序列表？答案

【问题标题】：How to remove ordered list using Javascript?如何使用 Javascript 删除有序列表？
【发布时间】：2019-04-26 22:49:32
【问题描述】：

我在下面给出了 2 个代码--
代码 1： 下面是我的代码，它使用querySelector 来选择我要删除的类名。
但它只删除第一个列表元素，不适用于剩余的列表，其类名也与第一个列表元素相同。
为什么在删除第一个列表元素后这不起作用（在删除第一个列表后，类名“删除”也仍然存在并且对它们不起作用）？

现在转到 代码 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的解法。
我在这里使用querySelector 表示 ol，它是有序列表，在 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') 选择整个有序列表，因此会浪费内存。
我想实现我的答案，即只选择类名“删除”而不是整个有序列表。

我们可以使用let ol = document.querySelectorAll('span.remove') 选择类名称“删除”的所有元素，这些元素作为数组存储在变量 ol 但在它之后我们如何选择那个数组元素将被删除？

【问题讨论】：

您是否已经确定浪费内存是否会对您的应用程序产生任何负面影响？ 如果您还没有这样做，那么您的问题实际上是没有实际意义的。
@RobertHarvey 我还没有确定，但是为什么我们将无用的数据存储在内存中？一个有序列表可能包含“数百万”个递归列表，因此将数百万个列表存储在一个变量中对于只需要一些元素的时间复杂度来说是不利的。这就是我问问题的原因。
@Abhishekkamal 将事件处理程序附加到 <ol> 是一个函数，因为只有一个 <ol>。如果您为每个<li> 附加一个事件处理程序，那么您最终会在内存中得到许多副本，因为有<li> 元素，这意味着<ol> 方法实际上可能更节省内存。你测试过你假设的记忆差异吗？

标签： javascript dom-events

【解决方案1】：

您的代码不起作用，因为在您的代码中 ol 是类名为“remove”的所有元素的集合。所以，你不能像单个元素一样使用它，你应该在 ol 上使用 for 循环来访问每个类名为“remove”的单个元素。

类似这样的：

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

【讨论】：

【解决方案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>

【讨论】：

您的代码无法正常工作.. 第 5 个元素在单击删除时似乎仍然存在？？
是的，这是真的，但如果我没记错的话，那是作者提出这个问题的意图。他为自己设定了移除条件，直到剩下 1 件为止。他从未提到删除所有元素。只是问为什么他的代码在第一个元素之后不起作用
是的，我在代码中看到了，但评论中也写着ignore to remove all list
我认为他想要达到的目标既不是我也不是你决定的，因为没有关于它的详细信息。我感谢你努力说清楚。

【解决方案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作为参数，代表被循环的item

所以document.querySelectorAll("ol")返回所有OL标签的列表

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

然后您可以执行document.querySelectorAll(".remove").forEach((item)=>{})，它将获取与“删除”类匹配的任何元素

最后，您只需使用 .onclick 绑定来添加一个事件，该事件通过执行 item.onclick = (event)=>{item.parentElement.parentElement.removeChild(item.parentElement); } 或 item.parentElement.outerHTML = "" 来添加仅在该特定项目上运行，它们都是相同的功能。

【讨论】：