Удаление группы элементов

[Master_Sergius]

Суть: нажимаю кнопочку - появляются поля для ввода данных и кнопка - отменить. Нажимаю кнопку "отменить" - это всё должно скрыться. Но, увы, удаляется не все, два текстовых поля остаются, если ещё поклацать туда-сюда - каша выходит. Вот скрипт:

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
};

NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = 0, len = this.length; i < len; i++) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        };
    };
};

Date.prototype.yyyymmdd = function() {
    var yyyy = this.getFullYear().toString();
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
    var dd  = this.getDate().toString();
    return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};

var show_add_form = function () {
    var form = document.getElementById("action_form");

    var date = document.createElement("input");
    date.type = "text";
    date.id = "date";
    d = new Date();
    date.value = d.yyyymmdd();
    form.appendChild(date);

    var amount = document.createElement("input");
    amount.type = "text";
    amount.id = "amount";
    amount.placeholder="money";
    form.appendChild(amount);

    var select = document.createElement("select");
    select.id = "type";
    select.placeholder="in/out";
    form.appendChild(select);

    var option = document.createElement("option");
    option.text = "income";
    select.appendChild(option);

    var option = document.createElement("option");
    option.text = "outcome";
    select.appendChild(option);

    var description = document.createElement("input");
    description.type = "text";
    description.id = "desc";
    description.placeholder="description of money operation";
    form.appendChild(description);

    var cancel = document.createElement("input");
    cancel.type = "button";
    cancel.id = "cancel";
    cancel.value = "cancel";
    cancel.onclick = function() { hide_add_form(); };
    form.appendChild(cancel);
};

var hide_add_form = function() {
    var elements = document.getElementById("action_form").elements;
    elements.remove();
};

[Erolast]

Ты что-то мудришь. Почему не просто

document.getElementById("action_form").innerHTML = "";

?

[Master_Sergius]

document.getElementById("action_form").innerHTML = "";

Хм... неплохо... А сами объекты уничтожатся? Ну, в памяти или где-то ещё ничё висеть не будет?

[Erolast]

Не будет. Сборщик мусора удаляет объект, если исчезли все ссылки на него.

[Master_Sergius]

Большое спасибо, но... зачем-то придумали метод removeChild и всё такое, должно же оно где-использоваться, не?

[Aetae]

Master_Sergius, во многих случаях removeChild проще. innerHTML изначально вообще не подразумевался, его придумал IE, но больно удобным оказался.
А проблема у тебя стнадртная новичковая. NodeList - это именно что коллекция. Живая коллекция. Не массив. Как только ты удаляшь первый элемент - первым на его место становится второй. Соответственно получается удаление через одного. В данном случае используют цикл с обратным перебором.(либо приведение к массиву, либо дополнительные операции с i в цикле, но всё это лишнее)

[Master_Sergius]

Отличное разъяснение. Большое спасибо. Значит, пока что, действительно попроще юзать innerHTML, но правильнее (на мой взгляд) - removeChild, что мы потом освоим получше )

[Erolast]

правильнее (на мой взгляд) - removeChild

Разве что с точки зрения семантики. Совсем немножко. Так или иначе, напиши функцию empty, где будет происходить очищение innerHTML, и будет тебе счастье.

[Aetae]

Erolast, ну какбэ NodeList может содержать коллекцию элементов имеющих разных родителей. К тому же эти родители могут содержать и другие элементы, которых нет в конкретной выборке. inneHTML ты в таких случаях никак не применишь.

[Erolast]

А, ну да. Почему-то решил, что тема только об удалении дочерей какого-либо элемента.