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（...）为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>

Answer 2

您正在尝试生成具有相同ID的多个html对象。这就是为什么这不起作用。当您的JavaScript查找ID为“ remove”的元素时，它将找到其中的几个，这是永远不会发生的。另外，还要注意id =“ complete”。每次添加新的待办事项时，尝试增加ID。

请注意，JavaScript的编码方式已被弃用。我建议您看看ES6和ES7中引入的新标准。

删除待办事项列表项

2 个答案:

为什么？

解决方案