Javascript-删除按钮和父级_Javascript_Select_Html Lists

Javascript-删除按钮和父级

javascript select

Javascript-删除按钮和父级,javascript,select,html-lists,Javascript,Select,Html Lists,大家好，我正在学习Javascript，在学习了一些教程之后，我想通过制作东西来练习一些Javascript会很好所以，现在我正在尝试做一个非常简单的清单。只是为了练习，但我被卡住了。我设法用一个删除按钮将项目添加到一个带有JS的UL中。但是，但是：我如何做到这一点；当您单击removeMe按钮时，是否仅删除该Li？我应该用什么？这是我的密码： var buttonAdd = document.getElementById('but1'); var buttonRemove = doc

大家好，我正在学习Javascript，在学习了一些教程之后，我想通过制作东西来练习一些Javascript会很好

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

我如何做到这一点；当您单击removeMe按钮时，是否仅删除该Li？我应该用什么？这是我的密码：

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>





添加内容

全部删除

谢谢

您只需删除父节点（li），如图所示

请注意Blue Skys的评论，这可能不适用于所有浏览器，另一种选择是：

var par = item.parentNode; par.parentNode.removeChild(par);

函数

remove（）

是一个简单的函数，目前还没有得到广泛的支持。笨重但防弹的方法是：

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

或者更优雅一点：

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

还要注意以下事项：

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

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

removeThis.onclick = removeMe;

或者，如果您需要移交参数

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

但是，最好的选择是始终这样：

Element.addEventListener("type-of-event",functionReference);

一个更干净的方法是添加

removeThis.onclick = removeMe;

及

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

JSfiddle:

天啊，就是这样。。我非常接近：）谢谢@MarekvanderHoeven：这只适用于少数现代浏览器。以广泛兼容的方式来做到这一点的正确方法是<代码> var PAR＝ITE.PARTRONDENT；PAR.PARTNORDECTOR.ReleFIVER（PAR）；

与Shane的解决方案相同的问题-remove在atm中的支持并不广泛。通过属性添加的onclick
处理程序的唯一（混乱）范围肯定会令人困惑。但“评估内容”是什么意思？@BlueSkies您作为第二个参数传递的字符串需要评估，这非常缓慢，而且可能存在安全风险。只评估一次就清楚了（有些人似乎认为它在每次事件中都会得到评估），其成本不会被注意到。我只是想澄清一下。不，如果您在代码中硬编码字符串，则不会有安全风险。在这一点上，它没有比任何其他编写的代码更大的风险。@BlueSkies您在这一点上是错的。它会影响性能，因为浏览器引擎无法提前优化和编译字符串。我还谈到了eval通常是一种潜在的安全风险，我想不出在javascript中需要它的任何用例。编译器无法优化这一点是正确的。
removeThis.onclick = removeMe;

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