Question

我想知道，如何使用纯javascript删除特定的<li>？我的目的是：每个<li>都有一个“删除”按钮，如果我们点击该按钮，它将删除<li>。

function remove(r){
    **REMOVE**
}

function add(){
    var ul = document.getElementById("ul");
    var li = document.createElement("li");

    if(document.getElementById("nameS").value && document.getElementById("mailS").value){
        var nameS = document.createElement("i");
        nameS.innerHTML = document.getElementById("nameS").value;
        nameS.innerHTML += ": ";

        var mailS = document.createElement("font");
        mailS.setAttribute("color","#000080");
        mailS.innerHTML = document.getElementById("mailS").value;
        mailS.innerHTML += " - ";

        if(document.getElementById("webpageS").value){
            mailS.innerHTML += "<a href="+document.getElementById("webpageS").value+">"+document.getElementById("webpageS").value+"</a>";
        }

        var element = document.createElement("input");
        element.setAttribute("type","button");
        element.setAttribute("value","Remover");
        //element.setAttribute("onclick",remove());
        element.addEventListener('click',function(){
               li.remove();
        },false);


        li.appendChild(nameS);
        li.appendChild(mailS);
        li.appendChild(element);
        ul.appendChild(li);
    }


}

Answer 1

如果您按照@Eevee的建议使用addEventListener添加remove函数，则传递给remove的第一个参数将是Event个对象。（对于点击事件，它将是MouseEvent对象。）

每个Event对象都有一个属性target，它告诉您元素的来源。因此，您只需go up the tree of elements即可获得li和remove：

function removeParent(evt) {
  evt.target.parentNode.remove();
}

element.addEventListener('click', removeParent, false);

您的代码的其他一些评论：

请不要使用font元素;同样i个元素。如果要应用样式，则应使用span;如果您想强调文字，请使用em。

Answer 2

我要做的是为每个li添加一个唯一的ID，以后可以引用它来删除它：

var curId = 0;
function add(){
....

var li = document.createElement("li");
li.setAttribute(id,curId)

...

curId++;
}

然后在你的按钮传递那个id

element.setAttribute("onclick",remove(curId));

然后对于你的删除功能，它只是：

function remove(ele){
    ducument.getElementById(ele).remove();
}

如何使用纯javascript删除特定的<li> </li>

2 个答案: