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

问题描述 投票：1回答：3

我在下面给出了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>


Code 2 : solution of code 1 .
I use here querySelector for ol which is ordered list and inside of the querySelector I use if(e.target.className == "remove") to remove list item .

//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>


Help me: but i don't want to use : document.querySelector('ol') which select the whole ordered list, due to which it will waste memory .
I want to achieve my answer which select only class name 'remove' instead of whole ordered list.

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

javascript dom-events
3个回答
0
投票

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

像这样的东西：

for (var i = 0; i < ol.length; i++) {
  ol[i].addEventListener('click', myFunction, false);
}
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>
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 = ""，它们都是相同的功能。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.