javascript - 使用javascript删除对象

我使用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>

最佳答案

看看我创建的这个eventListener

它侦听DEMO div中的任何单击，如果单击该按钮，则删除父LI-这称为委托(delegate)，当您在容器中有东西列表时，我更喜欢在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>