问题描述
抱歉我的愚蠢问题和错误解释
目前,我正在学习JS,不知道出了什么问题。
当我点击按钮时,我试图创建新的
列表,并且我想在点击X时将其删除
它确实可以以某种方式工作,但是仅当P标签中的标签数量超过1个时才有效。因此,不可能删除所有提交的内容
var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");
btn.addEventListener("click",add);
function add(){
var newP = document.createElement("p");
var newUl = document.createElement("ul");
var newLi = document.createElement("li");
var newText = document.createTextNode(text.value);
var delbtn = document.createElement("span");
delbtn.setAttribute("class","del")
var delText = document.createTextNode("X");
var delbtns = document.querySelectorAll(".del")
list.appendChild(newP);
newP.appendChild(newUl);
newUl.appendChild(newLi);
newLi.appendChild(newText);
newP.appendChild(delbtn);
delbtn.appendChild(delText);
text.value = ""
text.focus();
for (var i = 0; i < delbtns.length; i++){
delbtns[i].addEventListener("click",function () {
if(this.parentNode.parentNode)
this.parentNode.parentNode.removeChild(this.parentNode)
});
}
}
<!doctype html>
<html lang="en">
<head>
<Meta charset="UTF-8" />
<title>Document</title>
<style>
p{
width: 80%;
}
.del{
border: 1px solid #999;
display: flex;
flex-basis: 200;
}
</style>
</head>
<body>
<h1>hello world</h1>
<form action="">
<input type="text" id="write" />
<input type="button" id="submit"/>
</form>
<div id="list"></div>
<script src="index.js"></script>
</body>
</html>
解决方法
您不需要使用for循环添加多个事件,您只需要同时将事件添加到每个添加的按钮中,这是一个有效的代码段
var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");
btn.addEventListener("click",add);
function add(){
var newP = document.createElement("p");
var newUl = document.createElement("ul");
var newLi = document.createElement("li");
var newText = document.createTextNode(text.value);
var delbtn = document.createElement("span");
delbtn.setAttribute("class","del")
var delText = document.createTextNode("X");
newP.appendChild(newUl);
newUl.appendChild(newLi);
newLi.appendChild(newText);
newP.appendChild(delbtn);
delbtn.appendChild(delText);
list.appendChild(newP);
text.value = ""
text.focus();
delbtn.addEventListener("click",function () {
if(this.parentNode.parentNode)
this.parentNode.parentNode.removeChild(this.parentNode)
});
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p{
width: 80%;
}
.del{
border: 1px solid #999;
display: flex;
flex-basis: 200;
}
</style>
</head>
<body>
<h1>hello world</h1>
<form action="">
<input type="text" id="write" />
<input type="button" value="add" id="submit"/>
</form>
<div id="list"></div>
<script src="index.js"></script>
</body>
</html>
,
每次单击“添加”按钮时,就是将侦听器添加到所有按钮,而不是删除(因为一个按钮有多个侦听器)。
您可以直接在delbtn
元素中设置事件处理程序。
delbtn.addEventListener("click",function(e) {
if (this.parentNode.parentNode)
this.parentNode.parentNode.removeChild(this.parentNode)
});
工作提琴:https://jsfiddle.net/mrlew/g1fckz6t/3/
,您通过循环不断冒泡事件,这是第一个错误。创建新项目时,您需要一次将事件侦听器添加到其中。如果您使用开发工具检查结构,则会在一个项目上看到几个相同的事件。
创建元素后,SO仅定位到最后一个:
document.querySelector("#list > p:last-of-type > span.del:last-of-type").addEventListener("click",function () {
if(this.parentNode.parentNode)
this.parentNode.parentNode.removeChild(this.parentNode)
});
示例:
var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");
btn.addEventListener("click","del")
var delText = document.createTextNode("X");
var delbtns = document.querySelectorAll(".del")
list.appendChild(newP);
newP.appendChild(newUl);
newUl.appendChild(newLi);
newLi.appendChild(newText);
newP.appendChild(delbtn);
delbtn.appendChild(delText);
text.value = ""
text.focus();
document.querySelector("#list > p:last-of-type > span.del:last-of-type").addEventListener("click",function () {
if(this.parentNode.parentNode)
this.parentNode.parentNode.removeChild(this.parentNode)
});
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p{
width: 80%;
}
.del{
border: 1px solid #999;
display: flex;
flex-basis: 200;
}
</style>
</head>
<body>
<h1>hello world</h1>
<form action="">
<input type="text" id="write" />
<input type="button" id="submit"/>
</form>
<div id="list"></div>
<script src="index.js"></script>
</body>
</html>
请注意,您正在创建新的段落,其中的列表只有一个项目。不确定是故意的,但不是HTML列表应如何工作。您应该有ul
元素,其中包含更多li's
...
我在此答案中使用了闭包的功能,如果您想了解此答案,则需要先了解javascript闭包。
const input = document.querySelector('#input');
const btn = document.querySelector('#btn');
function add() {
const inputVal = input.value;
input.value = '';
const ul = document.createElement('ul');
const li = document.createElement('li');
const p = document.createElement('p');
p.textContent = inputVal;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'delete';
document.body.appendChild(ul);
ul.appendChild(li);
li.appendChild(p);
li.appendChild(deleteBtn);
deleteBtn.addEventListener('click',() => {
li.remove();
});
};
btn.addEventListener('click',add);
<input type="text" id="input" />
<button id="btn">submit</button>
,
我的方法是不打架浏览器,不要循环太多。 首先,放弃传统的方法,即通过DOM迭代以找到父项,然后尝试找到子项,然后将其删除。
有一种简单的方法可以进行事件委托。
您正在以任何方式动态创建节点。做得好。
只需向其添加onclick事件侦听器并触发element.remove()
函数。是的,这是正确的新方法。
在我的示例中,我已将其替换为this.parentElement.remove()
,因此它删除了发生事件的元素。
一旦创建了节点并同时注册了事件,便不再需要为之烦恼。
创建了一个p元素 为X创建了span元素 用文本字段的值更新P元素的innerHTMl,然后将span元素作为子元素添加。 然后,最后将P元素添加到列表div中。 单击X时,它会删除P元素及其所有内容。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p{
width: 80%;
}
.del{
border: 1px solid #999;
display: flex;
flex-basis: 200;
}
</style>
</head>
<body>
<h1>hello world</h1>
<form action="">
<input type="text" id="write" />
<input type="button" onclick="add()" value="add" id="submit"/>
</form>
<div id="list"></div>
<script>
function add(){
var mylist = document.getElementById("list");
var p = document.createElement("P");
var span = document.createElement("SPAN");
span.innerHTML ='\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'X';
span.onclick = function () {
this.parentElement.remove();
};
p.innerHTML = document.getElementById("write").value;
p.appendChild(span);
mylist.appendChild(p);
}
</script>
</body>
</html>
添加了注释:无需库即可使用。 除了一堆HTML外,没有太多笨拙的JS代码。保持简单,并使用浏览器的功能并与之一起扩展设计。