使用 e.target.parentElement.remove() 删除“<li>”时出现问题

Question

我正在创建待办事项列表，并试图在单击删除按钮后删除一行 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>

Answer 1

现在，您正在将事件侦听器添加到 #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>

Answer 2

两个问题。

首先是<ul id="todolist"></ul>中多了一个</ul>，因为</ul><br>中的ul要和<ul>配对。

二是class用法不对，可以这样用e.target.classList.contains('button')

Answer 3

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>

Answer 4

最大的问题是您立即关闭给定的 #todolist UL，因此 none 事件被触发。另外，除非我完全弄错了（我没有注意所以我可能是错的），我相信 $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>

使用 e.target.parentElement.remove() 删除“<li>”时出现问题

Issues removing an "<li>" using e.target.parentElement.remove()

html

javascript

parent-child

addeventlistener