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的解决方案。
我在这里使用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')，它会选择整个有序列表，因此会浪费内存。
我想实现只选择类名“ 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”类匹配的所有元素

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

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

3 个答案: