javascript - 删除待办事项列表项

Question

我试图通过单击项目上的删除按钮来删除待办事项列表项目。我不确定具体如何实现这一点。

添加项目的代码有效，但删除按钮功能无效。

document.getElementById('button').addEventListener('click',function addTodo(){
    var value = document.getElementById('input').value;
    const item = `<li>
                    <div class="item">
                       <div class="complete">
                        <button id="complete" class="todo">Complete</button>
                       </div>
    
                       <p class="text">${value}</p>
    
                        <div class="remove">
                           <button id="remove" class="todo">Remove</button>
                        </div>
                     </div>
                    </li>`;
           const position = "beforeend";
    
    list.insertAdjacentHTML(position,item);
    });
    
    document.getElementById('remove').addEventListener('click',function removeTodo(){
      var item = this.closest( 'li' );
        item.remove();
    });

<div class="container">
  <header>
    <input type="text" id="input" placeholder="Add an item"/>
    <button id="button"  type="button">Add item </button>
  </header>
  <div id="list"></div>
</div>    

当我检查控制台时，收到“TypeError: document.getElementById(...) is null app.js:24:10”

Answer 1

问题是您的代码试图将事件附加到不存在的元素。将新项目添加到列表后，您必须附加事件。

document.getElementById('button').addEventListener('click',function addTodo(){
var value = document.getElementById('input').value;
const item = `<li>
                <div class="item">
                   <div class="complete">
                    <button id="complete" class="todo">Complete</button>
                   </div>

                   <p class="text">${value}</p>

                    <div class="remove">
                       <button id="remove" class="todo">Remove</button>
                    </div>
                 </div>
                </li>`;
       const position = "beforeend";

list.insertAdjacentHTML(position,item);

document.getElementById('remove').addEventListener('click',function removeTodo(){
  var item = this.closest( 'li' );
    item.remove();
});
});

<div class="container">
  <header>
    <input type="text" id="input" placeholder="Add an item"/>
    <button id="button"  type="button">Add item </button>
  </header>
  <div id="list">
  </div>
</div>

好的。这解决了最初的问题，但现在产生了一个新问题:单击删除按钮后，仅删除添加的第一个项目。

为什么？

首先，代码创建具有相同 id 的新按钮。在 HTML 中，id 属性是元素的唯一标识符，因此它们不能重复。

解决方案

创建新项目时添加随机 ID。

document.getElementById('button').addEventListener('click',function addTodo(){
var value = document.getElementById('input').value;
var randomId = Math.random();
const item = `<li>
                <div class="item">
                   <div class="complete">
                    <button id="complete" class="todo">Complete</button>
                   </div>

                   <p class="text">${value}</p>

                    <div class="remove">
                       <button id="` + randomId  +`" class="todo">Remove</button>
                    </div>
                 </div>
                </li>`;
       const position = "beforeend";

list.insertAdjacentHTML(position,item);

document.getElementById(randomId).addEventListener('click',function removeTodo(){
  var item = this.closest( 'li' );
    item.remove();
});
});

<div class="container">
  <header>
    <input type="text" id="input" placeholder="Add an item"/>
    <button id="button"  type="button">Add item </button>
  </header>
  <div id="list">
  </div>
</div>