iFrame Javascript удалить дочерние элементы div - PullRequest
0 голосов
/ 05 августа 2010

Я создал приложение календаря для веб-сайта, который я создаю, и пытаюсь удалить элемент div с помощью JavaScript.

Процесс
-------------------
* Загрузка страницы календаря
* Пользователь нажимает на событие
* Событие всплывает с окном Fancybox, которому передается идентификатор контейнера и идентификатор события
* Пользователь нажимает Удалить событие
* Указанный div (div события календаря) должен быть удален

Я использую код JavaScript:

<script language="javascript" type="text/javascript">
    function btnClick(container, objID) {
        removeElement(container, objID);
        parent.$.fancybox.close();
    }
    function removeElement(par, div) {
        var d1 = parent.document.getElementById(par);
        var d2 = parent.document.getElementById(div);

        d1.removeChild(d2); // The Problem Line DOM 8 Not Found Exception
    } 
</script>

Использование предупреждения показывает, что d1 и d2 найдены, однако я получаю исключение DOM 8 при удалении дочернего узла. Есть идеи, как заставить это работать?

РЕДАКТИРОВАТЬ: Я использую ASP.Net, поэтому этот код выполняется на Page_Load

if(Request.QueryString["Container"] != null)
    lnkDelete.Attributes.Add("onclick", "btnClick(\"" + 
      Request.QueryString["Container"].ToString() + "\",\"" + 
      Request.QueryString["Control"].ToString() + "\");");

Таким образом, он просто добавляет функцию btnClick к кнопке удаления события. Событие запускается, и элементы найдены, просто он не удалит дочерний элемент из родительского документа.

1 Ответ

1 голос
/ 05 августа 2010

По предоставленной вами ссылке я попытался отследить вызовы функций.Как вы показываете, определены и d1, и d2, например, я получил:

d1.id = "cal_DayContent4"
d2.id = "calendarID4"

Тогда ваша функция выполняет:

d1.removeChild(d2);

Но давайте посмотрим на DOM:

<div id="cal_DayContent4" class="cal_DayContent">
    <div class="cal_DayNumber">5</div>
    <div class="calendarg-Party">
        <div id="calendarID4" class="calendar-Calendar">
            …
        </div>
    </div>
</div>

Как видно, d2 не является прямым потомком d1, а div с классом calendarg-Party.Если этот div всегда является вторым дочерним элементом d1, вы можете сделать что-то вроде

d1.childNodes[1].removeChild(d2);

и правильный узел будет удален.


Просто боковой узел: Я посмотрел немного дальше и нашел код, подобный этому (вставлен отступ):

(function (evt) {
    with (this.ownerDocument ? this.ownerDocument : {}) {
        with (this.form ? this.form : {}) {
            with (this) {
                return (function(evt){
                    btnClick("cal_DayContent4","calendarID4");
                }).call(this, evt);
            }
        }
    }
})

Я подозреваю, что это написано какой-то вещью ASP.NET (я ничего не знаю о ASP.NET),но это действительно плохо.Оператор with считается плохой практикой в ​​JavaScript и с причиной .Таким образом, трудно понять, что здесь происходит.


BTW2, знаете ли вы, что вы можете безопасно обмениваться одинарными и двойными кавычками в JavaScript?Это означает, что вы также можете написать свой код, например

if(Request.QueryString["Container"] != null)
    lnkDelete.Attributes.Add("onclick", 'btnClick("' + 
      Request.QueryString["Container"].ToString() + '","' + 
      Request.QueryString["Control"].ToString() + '");');

, который, ИМХО, гораздо проще для чтения.нет необходимости отправлять идентификатор d1 в вашу функцию removeElement.Вместо того, что я написал выше, проще (и надежнее, так как вы не зависите от родительского узла, всегда являющегося вторым узлом d1), чтобы сделать

d2.parentNode.removeChild(d2);

, что заставляет меня задуматься: почему для removeChild нужен родительский узел?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...