Question

单击按钮时删除元素

2022-09-22

1049

javascript click addeventlistener

我一直在尝试制作简单的待办事项列表来学习 javascript，并且能够添加和显示任务，但我找不到删除它的方法。我创建了一个删除按钮，但我无法使用它，单击时没有任何反应。所以任何帮助都很好，谢谢！

function handleSubmit(event){

    event.preventDefault();

    let value = getInputValue();

    if(value !== false){


        addToDom(value);

     
        eraseInput();
    }
}

const form = document.querySelector("#todo-list-form");
form.addEventListener('submit', handleSubmit);

function getInputValue() {
    const input = document.querySelector("#todo-input");

    let value = input.value;

    value = value.trim();

    if (value === '') {
        alert("You can not submit an empty field");
        return false;
    }
    else {
        return value;
    }
}

function addToDom(value) {
    const list = document.querySelector("#list");
    const removeButton = document.createElement("button");
    removeButton.innerHTML = 'remove';
    removeButton.classList.add("complete-btn");
    list.appendChild(removeButton);
    list.innerHTML += "<li>" + value + "</li>";
    console.log(list);
    removeButton.addEventListener('click', removeItem)
}

function removeItem(event){
    event.parentElement.remove();

}

function eraseInput() {
    const input = document.querySelector("#todo-input");

    input.value = "";

    input.focus();
}

Answer 1

出现此问题的原因在于您定义 removeButton 并将其添加到 DOM，但之后您立即覆盖了父元素的 HTML，从而删除了该按钮。

要解决此问题，您需要在创建元素并将其附加到 DOM 的方式上保持一致。

此外，正如 @Teemu 在评论中指出的那样，您需要在 removeItem() 函数中使用 event.target.parentElement 。

function addToDom(value) {
  const removeButton = document.createElement("button");
  removeButton.innerHTML = 'remove';
  removeButton.classList.add("complete-btn");
  removeButton.addEventListener('click', removeItem);
  
  const li = document.createElement('li');
  li.textContent = value;
  li.appendChild(removeButton);

  document.querySelector("#list").appendChild(li);
}

function removeItem(event){
  event.target.parentElement.remove();
}

这是一个完整的工作示例：

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

  let value = getInputValue();
  if (value !== false) {
    addToDom(value);
    eraseInput();
  }
}

const form = document.querySelector("#todo-list-form");
form.addEventListener('submit', handleSubmit);

function getInputValue() {
  const input = document.querySelector("#todo-input");

  let value = input.value;
  value = value.trim();

  if (value === '') {
    alert("You can not submit an empty field");
    return false;
  } else {
    return value;
  }
}

function addToDom(value) {
  const removeButton = document.createElement("button");
  removeButton.innerHTML = 'remove';
  removeButton.classList.add("complete-btn");
  removeButton.addEventListener('click', removeItem);

  const li = document.createElement('li');
  li.textContent = value;
  li.appendChild(removeButton);

  document.querySelector("#list").appendChild(li);
}

function removeItem(event) {
  event.target.parentElement.remove();
}

function eraseInput() {
  const input = document.querySelector("#todo-input");
  input.value = "";
  input.focus();
}

ul button { margin: 0 0 0 5px; }

<form id="todo-list-form">
  Item: <input type="text" id="todo-input" />
  <button type="submit">Add</button>
  <ul id="list"></ul>
</form>