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-这称为委托，当您在容器中有东西列表时，我更喜欢在普通JavaScript和jQuery中使用。< / p>

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

Answer 2

您需要能够通过为for循环内的每个元素设置一个ID来正确识别每个li元素。

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

然后在您的删除功能中，您可以使用li检索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>

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)），您需要将click事件作为参数传递，以便函数可以知道event.target的含义。

使用javascript删除对象

3 个答案: