我正在创建一个待办事项列表，并试图在单击删除按钮后删除一行li。使用我现在的代码，单击删除按钮时不会发生任何事情。这是父元素的问题吗？li是父元素，而不是输入，对吗？
此外，请忽略HTML中的复选框输入。我还没有为复选框的函数编写JS代码。非常感谢。
const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');
todolist.addEventListener('click', function(e){
if(e.target.tagName === 'button'){
e.target.parentElement.remove();
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>To Do List:</h1>
<ul id="todolist"></ul>
<li><input type="checkbox" class="checkbox"> Grocery Shop <button type=button class=button>Remove</button><br></li>
<li><input type="checkbox" class="checkbox"> Workout <button type=button class=button>Remove</button><br></li>
<form action="" id="addToDo" name="addToDo">
<input type="text" id="theToDo"
name="addToDo"
placeholder="Add to the list here">
<button type="submit">Submit</button>
</form>
</ul><br>
<script src=Test.js></script>
</body>
</html>ul结束标记位于错误的位置- 将
tagName的大小写更改为大写
const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');
todolist.addEventListener('click', function (e) {
if (e.target.tagName === 'BUTTON') {
e.target.parentElement.remove();
}
})<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>To Do List:</h1>
<ul id="todolist">
<li><input type="checkbox" class="checkbox"> Grocery Shop <button type=button class=button>Remove</button><br></li>
<li><input type="checkbox" class="checkbox"> Workout <button type=button class=button>Remove</button><br></li>
</ul>
<form action="" id="addToDo" name="addToDo">
<input type="text" id="theToDo" name="addToDo" placeholder="Add to the list here">
<button type="submit">Submit</button>
</form>
</ul><br>
<script src=Test.js></script>
</body>
</html>两个问题。
第一个是在<ul id="todolist"></ul>中有一个额外的</ul>，因为</ul><br>中的ul应该与<ul>配对。
第二个是类的用法错误，可以这样使用e.target.classList.contains('button')
最大的问题是您正在立即关闭给定的#todolistUL，因此没有任何事件启动。此外，除非我完全错了(我没有注意到，所以我可能错了(，否则我相信$el.tagName(其中$el是DOM节点(的值将是大写的，即BUTTON。
否则，我将使用Element.matches函数。
const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');
todolist.addEventListener('click', (e) => {
if (e.target.matches('#todolist li button')) {
e.target.parentNode.remove();
}
});<h1>To Do List:</h1>
<ul id="todolist">
<li><input type="checkbox" class="checkbox"> Grocery Shop <button type=button class=button>Remove</button></li>
<li><input type="checkbox" class="checkbox"> Workout <button type=button class=button>Remove</button></li>
<form action="" id="addToDo" name="addToDo">
<input type="text" id="theToDo" name="addToDo" placeholder="Add to the list here">
<button type="submit">Submit</button>
</form>
</ul>现在，您正在向#todolist添加事件侦听器。没有必要这么做。您可以使用以下命令将事件侦听器直接添加到<button>元素中：
onclick="remove(event)"
并添加了一个remove函数来处理点击。请参阅代码片段。。。
function remove(e) {
e.target.parentElement.remove();
}<!DOCTYPE html>
<html>
<body>
<h1>To Do List:</h1>
<ul id="todolist"></ul>
<li>
<input type="checkbox" class="checkbox"> Grocery Shop
<button type=button class=button onclick="remove(event)">Remove</button>
</li>
<li>
<input type="checkbox" class="checkbox"> Workout
<button type=button class=button onclick="remove(event)">Remove</button>
</li>
<li>
<form action="" id="addToDo" name="addToDo">
<input type="text" id="theToDo"
name="addToDo"
placeholder="Add to the list here">
<button type="submit">Submit</button>
</form>
</li>
</ul>
<script src=Test.js></script>
</body>
</html>