Удаление двух детей и их родителей с помощью Javascript

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, которая уже является ссылкой на ol.

form.removeChild(this.parentNode);

или

form.removeChild(li);

---

Или вы можете сделать все это без переменных, чтобы избежать создания замыкания.

this.parentNode.parentNode.removeChild(this.parentNode);