javascript - 如何制作一个删除用createElement创建的元素的按钮？

Question

我正在尝试使用 vanilla js 构建一个 todoList 并试图弄清楚如何制作一个删除/删除元素的按钮

我的代码中断并删除了所有内容。我尝试分配父变量并将其删除，但没有奏效

//selectors!
const todoBtn = document.querySelector('.todo-button');
const TodoList = document.querySelector('.todo-list');
const todoInput = document.querySelector('.todo-input');
//const TrashButton = document.querySelector('.trashbtn')

// event Listeners

todoBtn.addEventListener('click', Testgo);
//TrashButton.addEventListener('click' ,  Testing)
TodoList.addEventListener('click', Testing);

//Functions!

function Testgo(event) {
  event.preventDefault();

  const TodoDiv = document.createElement('div');
  TodoDiv.classList.add('todoDiv');

  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value;
  newTodo.classList.add('newTodo');

  TodoDiv.appendChild(newTodo);

  const TodoBtn = document.createElement('button');
  TodoBtn.classList.add('newbtn');
  TodoBtn.innerText = 'Edit';
  TodoBtn.innerHTML = "<i class='fas fa-check'></>";

  const TrashBtn = document.createElement('button');
  TrashBtn.classList.add('trashbtn');
  TrashBtn.innerText = 'delete';
  TrashBtn.innerHTML = "<i class='fas fa-trash'></>";
  //document.parentNode.removeChild()
  //TrashBtn.setAttribute('TrashB' , TrashB())

  TodoList.appendChild(TodoDiv);
  TodoList.appendChild(TodoBtn);
  TodoList.appendChild(TrashBtn);

  todoInput.value = '';

  console.log(TodoBtn.classList);

  // function TrashB(){
  //   const TrashInput = document.getElementsByClassName('newTodo')
  //   TrashInput.remove()
  // }
}

//TrashBtn.addEventListener('click' , Testing)

function Testing(event) {
  const item = event.target;

  const element = item.parentElement;

  if (item.classList.contains('trashbtn')) {
    element.remove();
  }

  // element.parentNode.removeChild(element)
}

<header>
  <h1>ToDo</h1>
</header>

<form>
  <input type="text" placeholder="Add" class="todo-input" />

  <button id="button" class="todo-button" type="submit"><i class="fas fa-plus-square"></i></button>
</form>

<div class="test1">
  <p>hi</p>
</div>
<div class="test2">
  <p>ho</p>
</div>

<div class="todo-container">
  <ul class="todo-list">
    <li class="todo">insert new stuff here</li>

    <button class=".btn-E">edit</button>
    <button class=".btn-D">delete</button>
  </ul>
</div>

标签： javascripthtml

Answer 1

有几点需要注意

1. 我相信您正在了解我在下面的示例中所做的“事件委托”，并且需要处理为待办事项列表动态创建的按钮的事件。

2. 我建议为每个带有子节点的元素添加 1 个 div。这使得移除元素变得容易。我们可以删除包含该项目所有内容的父节点。

3. 为此，我建议从 using 更改ul为 justdivs

4. 如果也使用图标也要小心，因为下面的事件委托只查找按钮上的点击事件。如果需要，您可以更新它。

这是一个完整的例子

const todoBtn = document.querySelector('.todo-button');
const TodoList = document.querySelector('.todo-list');
const todoInput = document.querySelector('.todo-input');

todoBtn.addEventListener('click', Testgo);

// event delegation for dynamically added list items
document.querySelector(".todo-container").addEventListener("click", function(e) {
  // if a button was clicked within the todo-container we will remove its parent (the housing div which holds the whole list item text and 2 buttons)

  if (e.target && e.target.nodeName == "BUTTON") {
    if (e.target.classList.contains("trashbtn")) {
      e.target.parentNode.remove();
    }
    if (e.target.classList.contains("editbtn")) {
      console.log("edit button clicked for", e.target.parentNode)
    }
  }
});

function Testgo(event) {
  event.preventDefault();

  // create the div to house the list text and 2 buttons
  const TodoDiv = document.createElement('div');
  TodoDiv.classList.add('todoDiv');
  // add the text from the input
  TodoDiv.innerText = todoInput.value;
  TodoDiv.classList.add('newTodo');

  // create the buttons and add them to the housing div
  const TodoBtn = document.createElement('button');
  TodoBtn.classList.add('editbtn');
  TodoBtn.innerText = 'Edit';

  const TrashBtn = document.createElement('button');
  TrashBtn.classList.add('trashbtn');
  TrashBtn.innerText = 'delete';

  TodoDiv.appendChild(TodoBtn);
  TodoDiv.appendChild(TrashBtn);

  // append the 1 div to the list that houses the item text and 2 buttons.
  TodoList.appendChild(TodoDiv);

  todoInput.value = '';
}

<header>
  <h1>ToDo</h1>
</header>

<form>
  <input type="text" placeholder="Add" class="todo-input" />

  <button id="button" class="todo-button" type="submit"><i class="fas fa-plus-square"> add</i></button>
</form>

<div class="todo-container">
  <div class="todo-list">
  </div>
</div>