JavaScript中的对象删除

Question

我使用JavaScript创建了一份待办事项清单，并想要添加一个“删除”按钮。如何编写方法实现这一功能？

我只想通过按钮来执行此操作。

let id = 3;
let todos = [{
    id: 1,
    title: "Javascript"
  },
  {
    id: 2,
    title: "Vue"
  }
];

function render() {
  flen = todos.length;
  text = "<ul id=myUL>";
  for (i = 0; i < flen; i++) {
    text +=
      "<li id=myLI>" +
      todos[i].title +
      "<button style=float:right onClick=removeElement()> Remove </button> " +
      "</li>";
  }
  text += "</ul>";
  document.getElementById("demo").innerHTML = text;
}
render();

//HERE A METHOD

function removeElement() {}

<div id="demo"></div>

- Atakan

---

删除按钮应该做什么？请添加更多细节和您当前拥有的代码。 - Krishna Prashatt

你需要呈现实际的代码，否则无法回答。 - collapsar

通常你会有一个“任务”数组，动作是在适当的索引处使用array.splice()。我不能再说更多了，因为你没有提供任何信息。注意 - Todo应用程序是默认的培训应用程序。关于这个主题的培训视频比色情网站还要多。也许你可以谷歌一下？ - ggdx

从数组中删除元素的一种方法是在其上调用filter()。 - user5734311

点击编辑，然后进入[<>]片段编辑器，并为我们提供一个[mcve]。 - mplungjan

Answer 1

看看我创建的这个事件监听器

它监听DEMO div中的任何点击事件，并在点击按钮时删除父LI - 这称为委派，在JavaScript和jQuery中，当您有容器中的一系列东西时，我更喜欢使用它。

已更新以删除id。

我提供了另一种过滤器的替代方法。

let id = 3;
let todos = [{
    id: 1,
    title: "Javascript"
  },
  {
    id: 2,
    title: "Vue"
  }
];

function render() {
  text = "<ul id=myUL>";
  todos.forEach(todo =>{ 
    text +=
      "<li id=myLI>" +
      todo.title +
      '<button type="button" data-id="'+todo.id+'" class="rem"> Remove </button>' +
      "</li>";
  })
  text += "</ul>";
  document.getElementById("demo").innerHTML = text;
}
render();
document.getElementById("demo").addEventListener("click",function(e) {
  var tgt = e.target;
  if (tgt.matches(".rem")) {
    tgt.closest("li").remove(); // or tgt.parentElement.parentElement.remove() for older browsers
    todos.splice(todos.findIndex(el => el.id = tgt.id), 1); // or use filter
    console.log(todos)
  }  
})

.rem { float: right }

<div id="demo"></div>

- mplungjan

---

从数组中删除它，同时不想在以后制造不必要的错误。 - Sumith

@Sumith S请查看更新的版本，该版本仅在单击按钮时从数组中删除。之前忘记加括号了。 - mplungjan

Answer 2

您需要在for循环中为每个

元素设置一个id，以便正确地识别每个元素。

然后，您需要将相同的id传递给您的removeElement()函数

然后，在您的删除函数中，您可以使用getElementById检索

元素，并使用node.remove()删除它。

let id = 3;
let todos = [
  {
    id: 1,
    title: "Javascript"
  },
  {
    id: 2,
    title: "Vue"
  }
];
function render() {
  flen = todos.length;
  text = "<ul id=myUL>";
  for (i = 0; i < flen; i++) {
    text +=
      "<li id=\"" + todos[i].id + "\">" +
      todos[i].title +
      "<button style=float:right onClick=removeElement(" + todos[i].id + ")> Remove </button> " +
      "</li>";
  }
  text += "</ul>";
  document.getElementById("demo").innerHTML = text;
}
render();

//HERE A METHOD

function removeElement(idToRemove) {
  // Remove the li element
  document.getElementById(idToRemove).remove();
  
  // Remove the element from the array
  todos = todos.filter(todo => todo.id !== idToRemove);
}

<div id="demo"></div>

- klugjo

Answer 3

如果你的函数有一个名为event的参数，那么在函数内部，你可以使用event.target来获取被点击的按钮的引用。
从那里开始，你可以使用Element.parentNode向上遍历DOM树，并且你可以使用Element.removeChild(childToRemove)来删除特定HTML元素的特定子元素。

因此它可能看起来像：

function removeElement(event){ // The parameter can have any name, but "event" is convenient
  const button = event.target,
        li = button.parentNode,
        ul = li.parentNode;
  ul.removeChild(li);
}

请注意，当调用函数时（例如onClick = removeElement（event）），您需要将单击事件作为参数传递，以便函数知道 event.target 的含义。

- Cat

---

如果你必须使用内联事件处理，那么在我看来，传递（this）并具有数据属性会更好。 - mplungjan

同意。我在这里的想法是保持非常简单，因为楼主的示例代码还没有展现出高水平的理解。（例如，使用字符串粗略地构建HTML元素，而不是使用 createElement，createTextNode 和 appendChild。） - Cat

我认为 function removeElement(button){ const li = button.parentNode, ul = li.parentNode; ul.removeChild(li); } 比使用事件更简单 - 而 button.closest("li") 更简单。 - mplungjan

是的。非常基本的事件处理是我选择在这个答案中展示的知识宝石（以及Element.parentNode属性和Element.removeChild方法）。我的第一版基本上只是添加了足够的代码使其工作，没有教授太多东西，我决定尝试使其更有教育意义而不会让人感到压抑。也许我没有找到完全正确的平衡点。 - Cat