使用纯javascript删除元素

我试图删除ul（列表项）中的一个元素，就像这样，只使用javascript。因为我是动态生成html的，所以我试图在下面创建onclick时设置它。但是，当我尝试单击（参见FIDLE）时，元素并没有被删除。相关职能如下：

var appendHTML = function (el) {
    var list = document.getElementById("events");
    for (var i = 0; i < filteredDates.length; i++) {
        var listItem = filteredDates[i].name;
        listItem.className = "event-list";
        listItem.setAttribute("onclick", "deleteEvent()");
        list.appendChild(listItem);
    }
};


var deleteEvent = function () {
    var listItem = this.parentNode;
    var ul = listItem.parentNode;
    //Remove the parent list item from the ul
    ul.removeChild(listItem);
    return false;
};

var appendHTML=函数（el）{
var list=document.getElementById（“事件”）；
对于（变量i=0；i

---

您的第一个问题是html中有“deleteEvent”，JSFIDLE不喜欢它

第二个问题是，您在deleteEvent中使用了错误的元素，因此父元素也不正确

请参阅更新的小提琴：

---

如果使用

onclick

属性将事件代码设置为字符串，则

此

上下文将丢失

注册事件处理程序的最佳方法是通过

addEventListener

：

listItem.addEventListener("click", deleteEvent);

---

作为备用方案，将事件代码设置为函数：

listItem.onclick = deleteEvent;

不鼓励这样做，因为这样每个事件只能设置1个事件处理程序

---

如果确实需要内联设置代码，请通过参数传递

this

的值：

<ul id="events" onclick="deleteEvent(this)">...</ul>

function deleteEvent(element) {
  // ...
}

…
函数deleteEvent（元素）{
// ...
}

您的JSFIDLE和代码有几处错误

事件处理程序的作用域 您正在使用一个。内联事件处理程序在全局范围内执行。但是，由于默认情况下fiddle将JavaScript代码包装在函数中，

deleteEvent

不是全局的。控制台显示错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

有三种方法可以解决这个问题：

• 设置您的小提琴y，而不是“加载”

这是事件处理程序内部的

由于您以

deleteEvent（）

的形式调用函数，因此不会引用触发事件的DOM元素。它将引用全局对象

窗口

，该对象没有

父节点

属性

如果您使用不同的方法绑定处理程序（如上所述），那么这个问题可能会自行解决。否则，您必须调用

deleteEvent

，使

this

引用元素：

onclick="deleteEvent.call(this)"

当然，您也可以更改

deleteEvent

的定义，改为接受元素作为参数

但是，在您的小提琴中，您实际上将事件处理程序附加到

元素，而不是每个

元素。在这种情况下，您必须将事件对象传递给函数，并从中获取原始目标：

onclick="deleteEvent(event)"

及

错误节点引用 似乎在

deleteEvent

中删除了错误的节点

listItem

实际上是

元素，因为它是单击元素的父元素。因此，

ul

将是

元素的父元素

由于

此

已引用

元素，因此此处需要

列表项

，而

ul

应为

此.parentNode

。简而言之：

var deleteEvent = function () {
  //Remove the parent list item from the ul
  this.parentNode.removeChild(this);
}

返回false

无效

返回false

通常用于防止事件的默认操作。但是，单击

li

元素没有默认操作。此外，必须从事件处理程序返回该值

deleteEvent

不是您的事件处理程序，它由您的事件处理程序调用。因此，如果要返回其返回值，则必须执行以下操作：

listItem.setAttribute("onclick", "return deleteEvent()");

但同样，您应该更喜欢使用不同的绑定事件处理程序

节点创建无效 在问题中的代码中，您试图对任意对象调用

setAttribute

，并尝试将任意对象附加到DOM元素。那不行。必须使用

document.createElement

创建新元素：

var li = document.createElement('li');

---

看来你在小提琴上做得不错。

感谢你解释了不同的方法和优缺点！非常有趣的解决方案。这删除了整个ul，而不是单个的“li”@devdropper87：这就是你在

deleteEvent

中的逻辑。所以我猜第三个问题是你的逻辑不正确。而且你在这里发布的代码与你的小提琴中的代码不同。在这里，您将处理程序绑定到每个

li

元素，在您的小提琴中，您将处理程序附加到

元素。@devdropper87在上面的回答中，我已更正了您的代码，以便您可以看到错误所在。您在这里发布的代码与小提琴中的代码根本不匹配。如果您有两个不同版本的代码，但我们不知道要查看哪个版本，您希望我们如何帮助您。即使原始版本与您在此处发布的版本也不相同。我猜就是你在这里发布的那个。“jsFiddle不喜欢它。”这并不是说一个工具可以有感觉。您至少可以正确解释这些问题。@FelixKling，内联单击事件是有效的，虽然不建议在JSFIDLE之外使用。如果安装正确，它也可以在JSFIDLE内部使用。是否推荐它是一个不同的问题。我不知道是否有“正确”设置它的选项，但由于特定工具问题而批评答案也是一个不同的问题……我不是批评你的答案有JSFIDLE问题，我是批评它没有提供任何解释。

listItem.setAttribute("onclick", "return deleteEvent()");

var li = document.createElement('li');