我在下面给出了 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>
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')
选择类名称“ remove”的所有元素,这些元素存储为数组 变量ol,但是之后如何选择该数组元素 将被删除?
答案 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 = ""
都可以在相同的功能上单独作用于特定项目。