我已经创建了元素“li”，并通过创建它们在其中附加了另外两个元素(div 和 button)。现在，当它被附加到 DOM 中时，我希望在单击“删除”按钮时也能动态删除它，我还捕获了 btnid 变量中的所有按钮，通过这些按钮将删除“li”项，但现在我不知道如何将EventListener 添加到这些按钮，如果我通常添加 btnid.addEvent..... ..然后它会抛出错误，因为它尚未定义，因为在动态添加元素之前没有元素。
let input = document.querySelector('#addinput')
let btn = document.querySelector('#addbtn')
let listcontainer = document.querySelector('#listcontainer')
let btnid;
btn.addEventListener('click', () => {
let inpVal = input.value
if (inpVal.length != 0) {
let html = `<li class="margin5pxall pad5pxall"><div>${inpVal}</div><button class="btn delete">Delete</button>`
listcontainer.innerHTML += html
btnid = listcontainer.getElementsByTagName('button')
console.log(btnid);
input.classList.remove('red')
} else {
input.classList.add('red')
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="mainBox flecCol bordernRad">
<div class="flexCol margin5pxall bordernRad mainHead">
<h1 class="textAlign head margin5pxall">Book List</h1>
<div class="flexRow margin5pxX">
<input type="text" class="inp margin5pxall" placeholder="Search">
<button class="btn">Search</button>
</div>
</div>
<div class="list margin5pxall bordernRad">
<ul id="listcontainer"></ul>
</div>
<div class="flexCol bordernRad margin5pxall lastHead">
<h1 class="textAlign head margin5pxY">Add a New Book</h1>
<div class="flexRow margin5pxX">
<input type="text" class="inp margin5pxall" id="addinput" placeholder="Book Name">
<button class="btn" id="addbtn">Add</button>
</div>
</div>
</div>
</body>
<script src="index.js"></script>
</html>最佳答案
您可以简单地使用 parentElement并使用 onclick 函数将 remove 添加到您的 delete 按钮。这样，只有您单击的元素才会被删除。
In the
onclick()functionthisrefers to as which element we have clicked on
运行下面的代码片段以查看其工作原理。
let input = document.querySelector('#addinput')
let btn = document.querySelector('#addbtn')
let listcontainer = document.querySelector('#listcontainer')
let btnid;
btn.addEventListener('click', () => {
let inpVal = input.value
if (inpVal.length != 0) {
let html = `<li class="margin5pxall pad5pxall"><div>${inpVal}</div><button class="btn delete" onclick="removeItem(this)">Delete</button>`
listcontainer.innerHTML += html
//clear input
input.value = ''
//Add class
input.classList.remove('red')
} else {
input.classList.add('red')
}
})
//Remove Item
function removeItem(event) {
event.parentElement.remove()
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="mainBox flecCol bordernRad">
<div class="flexCol margin5pxall bordernRad mainHead">
<h1 class="textAlign head margin5pxall">Book List</h1>
<div class="flexRow margin5pxX">
<input type="text" class="inp margin5pxall" placeholder="Search">
<button class="btn">Search</button>
</div>
</div>
<div class="list margin5pxall bordernRad">
<ul id="listcontainer"></ul>
</div>
<div class="flexCol bordernRad margin5pxall lastHead">
<h1 class="textAlign head margin5pxY">Add a New Book</h1>
<div class="flexRow margin5pxX">
<input type="text" class="inp margin5pxall" id="addinput" placeholder="Book Name">
<button class="btn" id="addbtn">Add</button>
</div>
</div>
</div>
</body>
<script src="index.js"></script>
</html>关于javascript - 现在如何删除创建和附加的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63090094/