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

Question

我正在尝试将一种成分推送到数组列表中。 这个成分是一个 object，它的id来自uuid或任何库，以及用户在输入中键入的任何成分值。

我在单个 function 中编写了最简单的示例，因此很清楚我的疑问的核心。

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

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

代码

 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

您可以从#ingredients中删除 p 标签和删除按钮，而不是重新渲染。 仅从 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
  });
});

Answer 2

与上一个答案类似的解决方案，但我会将您添加的项目包装在一个具有保存 uuid 值的属性的div中，因此您可以在单击删除按钮时轻松找到 uuid，然后您可以手动更新值在您的ingredients数组中，并从 DOM 中手动删除包装div 。

CodePen 演示

let ingredients = []

document.querySelector('#ingredients-input').addEventListener('change', (e) => {
  e.preventDefault()
  
  const id = uuid()
  
  ingredients.push({ 
    id: id,
    title: e.target.value
  })
  
  const wrapper = document.createElement('div')
  wrapper.setAttribute('data-uuid', id)
  const ingredientUl = document.createElement('p')
  const removeButton = document.createElement('button')
  
  ingredientUl.textContent = e.target.value
  removeButton.textContent = 'remove'
  
  wrapper.append(ingredientUl, removeButton)
  
  document.querySelector('#ingredients').append(wrapper)
  
  removeButton.addEventListener('click', (e) => {
    const wrapper = e.target.closest('div[data-uuid]');
    const wrapperUuid = wrapper.getAttribute('data-uuid');
    // Filters out the ingredient associated with the clicked remove button
    ingredients = ingredients.filter(ingredient => ingredient.id !== wrapperUuid)
    // Removes element from dom
    wrapper.remove()
  })
})

Answer 3

 let ingredients = []; function remove(evt,id){ const ingredientIndex = ingredients.findIndex((el) => el.id === id); ingredients.splice(ingredientIndex,1); renderElem(); renderElem(); }; function renderElem() { document.querySelector("#ingredients").innerHTML=''; ingredients.forEach((emp) => { const ingredientUl = document.createElement("p"); const removeButton = document.createElement("button"); ingredientUl.textContent = emp.title; removeButton.textContent = "remove"; removeButton.addEventListener("click", (e) => { remove(e,emp.id); }); document.querySelector("#ingredients").append(ingredientUl, removeButton); }); } document.querySelector("#ingredients-input").addEventListener("change", (e) => { e.preventDefault(); const id = uuid(); ingredients.push({ id: id, title: e.target.value }); renderElem(); });

 * { background: black; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script> <body> <div id="ingredients"></div> <input id="ingredients-input"> </body>