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

时间:2019-01-04 04:32:28

标签: javascript dom-events

我在下面给出了 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,但是之后如何选择该数组元素   将被删除

3 个答案:

答案 0 :(得分:0)

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

类似这样的东西:

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

答案 1 :(得分:0)

为什么第一个版本的代码无法正确运行的原因是,您定义了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>

答案 2 :(得分:0)

您可以执行此操作以删除所有多余的代码

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 = ""都可以在相同的功能上单独作用于特定项目。