Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2014, 23:13
Аспирант
Отправить личное сообщение для Master_Sergius Посмотреть профиль Найти все сообщения от Master_Sergius
 
Регистрация: 29.07.2014
Сообщений: 42

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

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();
};
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2014, 07:33
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Ты что-то мудришь. Почему не просто
document.getElementById("action_form").innerHTML = "";

?

Последний раз редактировалось Erolast, 23.08.2014 в 08:13.
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2014, 12:29
Аспирант
Отправить личное сообщение для Master_Sergius Посмотреть профиль Найти все сообщения от Master_Sergius
 
Регистрация: 29.07.2014
Сообщений: 42

Сообщение от Erolast Посмотреть сообщение
Ты что-то мудришь. Почему не просто
document.getElementById("action_form").innerHTML = "";

?
Хм... неплохо... А сами объекты уничтожатся? Ну, в памяти или где-то ещё ничё висеть не будет?
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2014, 15:25
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Не будет. Сборщик мусора удаляет объект, если исчезли все ссылки на него.
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2014, 20:45
Аспирант
Отправить личное сообщение для Master_Sergius Посмотреть профиль Найти все сообщения от Master_Sergius
 
Регистрация: 29.07.2014
Сообщений: 42

Большое спасибо, но... зачем-то придумали метод removeChild и всё такое, должно же оно где-использоваться, не?
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2014, 21:25
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

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

Последний раз редактировалось Aetae, 23.08.2014 в 21:28.
Ответить с цитированием
  #7 (permalink)  
Старый 24.08.2014, 15:27
Аспирант
Отправить личное сообщение для Master_Sergius Посмотреть профиль Найти все сообщения от Master_Sergius
 
Регистрация: 29.07.2014
Сообщений: 42

Отличное разъяснение. Большое спасибо. Значит, пока что, действительно попроще юзать innerHTML, но правильнее (на мой взгляд) - removeChild, что мы потом освоим получше )
Ответить с цитированием
  #8 (permalink)  
Старый 24.08.2014, 15:37
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Цитата:
правильнее (на мой взгляд) - removeChild
Разве что с точки зрения семантики. Совсем немножко. Так или иначе, напиши функцию empty, где будет происходить очищение innerHTML, и будет тебе счастье.
Ответить с цитированием
  #9 (permalink)  
Старый 25.08.2014, 00:12
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

Erolast, ну какбэ NodeList может содержать коллекцию элементов имеющих разных родителей. К тому же эти родители могут содержать и другие элементы, которых нет в конкретной выборке. inneHTML ты в таких случаях никак не применишь.
__________________
29375, 35
Ответить с цитированием
  #10 (permalink)  
Старый 25.08.2014, 05:43
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаление элементов из files[i] (<input multiple="">) ksevelyar jQuery 10 13.03.2017 08:51
Динамическая форма. Удаление элементов. Demonuka Элементы интерфейса 2 21.04.2014 20:32
Массивы. Динамическое удаление элементов userbanderas Элементы интерфейса 2 06.01.2012 23:29
Удаление элементов по ID Hisson4eg jQuery 2 11.11.2011 16:44
Удаление элементов через splice. возможно ли оптимизировать? Storan Общие вопросы Javascript 0 01.10.2011 21:16