使用纯javascript删除元素

Question

我试图删除ul(列表项)中的元素,因此只使用javascript.因为我动态生成html,所以我试图设置onclick,因为我在下面创建它.但是,当我尝试单击(请参阅小提琴)时,元素不会被删除.相关功能如下:

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;
};

https://jsfiddle.net/youngfreezy/7jLswj9b/5/

Answer 1

你的第一个问题是你的html中有"deleteEvent",jsFiddle不喜欢它.

第二个问题是你在deleteEvent中使用了错误的元素,因此父级也是错误的.

请参阅更新的小提琴:https://jsfiddle.net/7jLswj9b/7/

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

 var list = document.getElementById("events");
list.addEventListener("click",deleteEvent,false);