Question

一直在努力解决这个问题，我有以下DOM结构：

<ol id="add_images">
    <li>
        <input type="file" /><input type="button" name="removeButton" />
    </li>

    <li>
       <input type="file" /><input type="button" name="removeButton" />
    </li>

    <li>
        <input type="file" /><input type="button" name="removeButton" />
    </li>

基本上我在点击删除按钮时尝试删除所有子项和包含父项（li标记）。

我尝试过各种parentNode和removeChild组合。使用下面的javascript，我只能找到孩子而不是父母。

function addFile(addFileButton) {
    var form = document.getElementById('add_images');
    var li = form.appendChild(document.createElement("li"));

    //add additional input fields should the user want to upload additional images.    
    var f = li.appendChild(document.createElement("input"));
    f.className="input";
    f.type="file";
    f.name="files[]";

    //add a remove field button should the user change their mind
    var rb = li.appendChild(document.createElement("input"));
    rb.type="button";
    rb.value="Remove File";
    rb.onclick = function () {//This is where the problem is
        li.removeChild(this.parentNode);
        li.removeChild(this);
    }
}

我确信这很简单。谢谢你的帮助。

Answer 1

由于您尝试删除<li>，因此需要从其父节点ol执行此操作。

li.parentNode.removeChild(this.parentNode);

您还可以使用已经引用form的{{1}}变量。

ol

或：

form.removeChild(this.parentNode);

或者你可以在没有变量的情况下完成所有操作，以避免创建闭包。

form.removeChild(li);

使用Javascript删除两个子节点及其父节点

1 个答案: