1

嗨，我刚刚学习 Javascript，在学习了一些教程之后，我认为通过制作东西来练习一些 Javascript 会很好。

所以现在我正在尝试制作一个非常简单的待办事项清单。只是为了练习，但我卡住了。我设法将带有移除按钮的项目添加到带有 JS 的 UL 中。但是，但是：

我该如何做到这一点；当你点击removeMe按钮时，那只有那个李会被删除？我应该使用什么？这是我的代码：

var buttonAdd = document.getElementById('but1');
var buttonRemove = document.getElementById('but2');

var ul = document.getElementById('myUl');

function addLi() {
var newLi = document.createElement('li');
var removeThis = document.createElement('button');
var textInput = document.getElementById('inputText').value;
if(textInput === ""){
 alert('Add text');
}else{
newLi.innerHTML = textInput;
newLi.appendChild(removeThis);
removeThis.innerHTML = "Remove me";
removeThis.setAttribute("onClick", "removeMe(this);");
ul.appendChild(newLi);
 }  
}

buttonAdd.onclick = function() {
 addLi(); 
};

buttonRemove.onclick = function() {
 ul.innerHTML = "";
};

function removeMe(item){
  //get called when clicked on the remove button
}

和我的 HTML：

<body>
 <ul id="myUl"></ul>
  <input id="inputText" type="text"><br />
  <button id="but1">Add stuff</button><br />
  <button id="but2">Remove all</button>
</body>

谢谢

4

3 回答 3

1

您只需要删除父节点（li），正如我使用 jsbin 所示。

function removeMe(item){
    item.parentNode.remove();
}

请注意 Blue Skies 的评论，这可能不适用于所有浏览器，替代方法是：

var par = item.parentNode; par.parentNode.removeChild(par);
于 2013-11-13T15:30:10.807 回答
1

该函数remove()是一种全新的 DOM 4 方法，尚未得到广泛支持。笨重但防弹的方法是：

function removeMe(item){
  item.parentElement.parentElement.removeChild(item.parentElement);
}

或者更优雅一点：

function removeMe(item){
  var parent = item.parentElement;
  parent.parentElement.removeChild(parent);
}

http://jsfiddle.net/BtbR4/

还要小心这一点：

removeThis.setAttribute("onClick", "removeMe(this);");

出于几个原因（评估字符串，弄乱范围），将函数引用作为字符串处理总是一个坏主意。有几个更好的选择：

removeThis.onclick = removeMe;

或者如果你需要交出参数

removeThis.onclick = function(){removeMe(your,parameters)};

然而，最好的选择是始终像这样附加事件处理程序：

Element.addEventListener("type-of-event",functionReference);
于 2013-11-13T15:41:15.997 回答
0

一种更清洁的做事方式是添加

removeThis.onclick = removeMe;

和

function removeMe(mouseEvent){
    this.parentNode.remove();
}

这与您在代码中添加其他 onclick 函数的方式一致。既然您说您正在学习 js，那么了解事件和函数的工作原理是一个好主意。因此，从 this 中得出的结论是，附加到对象的函数的“this”是对象本身（在本例中为 removeThis 对象），事件处理程序使您可以访问调用它们的事件（mouseEvent）在参数列表中。

JSfiddle：http: //jsfiddle.net/QT4E3/

于 2013-11-13T15:44:33.277 回答