Javascript动态按钮按id删除项目并删除自己（无限循环）

Question

我正在尝试将一种成分推送到数组列表中。该成分是一个对象，并具有其id来源uuid或任何库以及用户在输入中键入的任何内容的成分值。

我在单个函数中编写了它的最简单示例，因此很容易理解我怀疑的核心。

如果按钮是渲染的一部分，我如何通过 id 删除项目并重新渲染。

我可以创建一个渲染函数并在删除按钮内调用它。问题是按钮将成为该功能的一部分。

代码

let ingredients = []

document.querySelector('#ingredients-input').addEventListener('change', (e) => {
  e.preventDefault()

  const id = uuid()

  ingredients.push({
    id: id,
    title: e.target.value
  })

  const ingredientUl = document.createElement('p')
  const removeButton = document.createElement('button')

  ingredientUl.textContent = e.target.value
  removeButton.textContent = 'remove'

  document.querySelector('#ingredients').append(ingredientUl, removeButton)

  removeButton.addEventListener('click', (e) => {
    const ingredientIndex = ingredients.findIndex(el => el.id === id)
    ingredients.splice(ingredientIndex, 1)
  })
})

<div id="ingredients"></div>
<input id="ingredients-input">

代码笔：https ://codepen.io/notnishi/pen/QWyPdLL

任何帮助，将不胜感激。

Answer 1

您可以从 中删除 p 标签和删除按钮，而不是重新渲染#ingredients。仅从 DOM 中删除特定元素比仅针对一项更改重新渲染整个成分列表要高效得多。

可以使用ChildNode.remove()来删除删除按钮，并且为了删除成分Ul，我们可以迭代其子列表#ingredients并首先找到要删除的项目，然后使用Node.removeChild()将其删除

let ingredients = [];
const ingredientsNodeList = document.querySelector("#ingredients");

document.querySelector("#ingredients-input").addEventListener("change", (e) => {
  e.preventDefault();

  const id = uuid();

  ingredients.push({
    id: id,
    title: e.target.value,
  });

  const ingredientUl = document.createElement("p");
  const removeButton = document.createElement("button");

  ingredientUl.textContent = e.target.value;
  ingredientUl.id = id;
  e.target.value = ""; // Clearing the input after entering it to ingredients list
  removeButton.textContent = "remove";

  ingredientsNodeList.append(ingredientUl, removeButton);

  removeButton.addEventListener("click", (e) => {
    const ingredientIndex = ingredients.findIndex((el) => el.id === id);
    ingredients.splice(ingredientIndex, 1);

    const itemToDelete = [...ingredientsNodeList.children].find(el => el.id === id);
    ingredientsNodeList.removeChild(itemToDelete); // Removing ingredientUl
    e.target.remove(); // Deleting removeButton
  });
});