VPF::Удаление объекта - Форум программистов

Still

Дата 20.10.2008, 18:21 (ссылка)

(нет голосов)

Загрузка ...

PHP-программист

Профиль
Группа: Участник
Сообщений: 87
Регистрация: 27.5.2007

Репутация: нет
Всего: нет

Доброго времени суток!

У меня возник небольшой вопрос по поводу полного удаления объектов (в частности инпутов) со страницы.

Описание.
Есть список инпутов (тип: текст) для ввода данных, внизу формы имеется кнопка "Добавить новое поле ввода", а рядом с каждым полем ввода есть кнопка "Удалить поле ввода". Задача банальная: ввода данных (неограниченное количество, естессна, количество выбирается пользователем), обработка, отправка на сервер. При нажатии на кнопке "Добавить..." JS делает некоторую проверку и добавляет внизу списка еще одно поле ввода, распределяются айдишники и т.п. При нажатии на кнопку "Удалить..." JS делает проверки и(!) присваивает инпуту display: none. Поле исчезает с экрана.

Проблема.
В данный момент при нажатии на кнопку "Удалить..." поле ввода (инпут) исчезает (display: none) однако форматирование страницы не изменяется, то есть эффект display: none тот же, что и visibility: hidden. Получается, если удалено двадцать инпутов, то вместо них будет просто свободное место в контейнере, а его нужно уменьшать при клике на кнопке удаления инпута - удаляется инпут и гм... высота занимаемая инпутом становиться равной 0px (изменять высоту при удалении не предлагать).

Вопрос.
Можно ли каким-нибудь образом (скорее всего JS'ом, хотя не важно) удалять объект полностью?
______________________________________________
Возможно, что-то не точно описал. На вопросы отвечу.
Заранее спасибо!

webster

Дата 20.10.2008, 19:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Нужен хотя бы минимальный образчик кода, иначе представить полное состояние проблемы очень трудно.
Да, при присваивании элементу display: none; он должен исчезать из дерева DOM.

Still

Дата 20.10.2008, 22:00 (ссылка)

(нет голосов)

Загрузка ...

PHP-программист

Профиль
Группа: Участник
Сообщений: 87
Регистрация: 27.5.2007

Репутация: нет
Всего: нет

Ниженапечатанный исходник в грубом описании будет таким:

1. [input][input] [button]
2. [input][input] [button]

Код


<td>
    <p id="new_0" height="20">
        // первая строка инпутов 
        <span id="prop_show_0_0" style="position: relative;"> 1. 
        <input id="property_lvl1_0_0" class="ac_input" type="text" onkeyup="getDesc(0, this, '0_0');" autocomplete="off" size="40" value="" title="0" name="property[0][0]"/>
        <span id="hint_0_0" style="overflow: hidden; width: 530px; position: absolute; left: 22px; top: 23px; font-size: 14px; display: none; z-index: 50;"/> //подсказка
                <input id="prop_value_lvl1_0_0" type="text" value="" size="40" title="0" name="property_value[0][0]"/>
        <input id="del_property[0][0]" type="button" value="Видалити" onclick="delete_property(0,0);" name="del_property"/>
        </span>
        
        <br/>
        
        // вторая строка инпутов
        <span id="prop_show_0_1" style="position: relative;"> 2. 
        <input id="property_lvl1_0_1" class="ac_input" type="text" onkeyup="getDesc(0, this, '0_1');" autocomplete="off" size="40" value="" title="1" name="property[0][1]"/>
        <span id="hint_0_1" style="overflow: hidden; width: 530px; position: absolute; left: 22px; top: 23px; font-size: 14px; display: none; z-index: 50;"/> //подсказка
        <input id="prop_value_lvl1_0_1" type="text" value="" size="40" title="1" name="property_value[0][1]"/>
        <input id="del_property[0][1]" type="button" value="Видалити" onclick="delete_property(0,1);" name="del_property"/>
        </span>
        <span>
            ...
        </span>
        ...
    </p>
</td>

Событие onclick="delete_property(i,j);" вызывает следующею процедуру, которая удаляет строку инпутов
(плюс все спаны, которые необходимо удалить):

Код


function delete_property(lvl1,id) 
{
    var input_title = document.getElementById("property_lvl1_"+lvl1+"_"+id); // первый инпут
    var input_value = document.getElementById("prop_value_lvl1_"+lvl1+"_"+id); // второй инпут
    var span_del = document.getElementById("prop_show_"+lvl1+"_"+id); // спан, в котором находятся инпуты и кнопка удаления
    var but_del = document.getElementById("del_property["+lvl1+"]["+id+"]"); // кнопка удаления
    var last_prop = id;
    while (...)
    {    
        ... // цикл перезаписи данных, не имеет отношения    
    }
    span_del.style.display='none'; // скрытие спана, в котором находятся инпуты, кнопка удаления
    ... // часть кода, стирающая данные всех айдишников, валуев и т.п.
}

Гм... я не совсем точно выразился в первом посте, не инпутам присваивается свойство display: none, а контейнеру в котором они содержаться.

webster

Дата 20.10.2008, 22:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Вот эта запись:

Код


<span id="hint_0_0" style="overflow: hidden; width: 530px; position: absolute; left: 22px; top: 23px; font-size: 14px; display: none; z-index: 50;"/>

Спан должен имет закрывающий тег (если это не "пустой" элемент, т.е. если это не элемент без содержимого, подобно <img /> и <input />).
Броузеры конечно пытаются поправить эту явную ошибку, и из-за этого как бы остается текстовая строка, которая и занимает место.

Still

Дата 20.10.2008, 22:51 (ссылка)

(нет голосов)

Загрузка ...

PHP-программист

Профиль
Группа: Участник
Сообщений: 87
Регистрация: 27.5.2007

Репутация: нет
Всего: нет

webster, дело не в этом спане, убрал полностью его со страницы, проблема осталась та же.

Добавлено через 5 минут и 51 секунду
Все. Проблему решил.
За нагроможденностью кода уже просто не заметны обычные одинарные <br />.

Прошу прощение за время.

ЗЫ Такого прокола не было уже очень давно 8)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »