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

Answer 1

看看我创建的这个 eventListener

它监听 DEMO div 中的任何点击，如果点击是在按钮上，则删除父 LI - 这称为委托(delegate)，当容器中有事物列表时，我更喜欢在 vanilla JavaScript 和 jQuery 中使用委托(delegate)。

已更新以删除 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>