Question

我为我正在构建的网站创建了一个日历应用程序，我正在尝试使用javascript删除div元素。

流程
-------------------
   *日历页面加载
   *用户点击活动
   *事件弹出一个Fancybox窗口，该窗口传递Container Div ID和Event Div ID
   *用户点击删除事件
   *应该删除指定的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函数添加到Remove Event链接按钮。该事件触发，并且找到了元素，只是它不会从父文档中删除子元素。

Answer 1

从您提供的链接中，我尝试跟踪函数调用。如您所示，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中被视为不良做法，with reason。这样，很难理解这里发生了什么。

BTW2，你知道你可以安全地在JavaScript中交换单引号和双引号吗？这意味着你也可以编写像

这样的代码

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

这是恕我直言，更容易阅读。

更新一段时间后，我意识到根本不需要将d1的ID发送到您的函数removeElement。而不是我上面写的，更容易（并且更健壮，因为你不依赖于父节点始终是d1的第二个节点）

d2.parentNode.removeChild(d2);

让我感到奇怪：why does removeChild need a parent node?

iFrame Javascript删除div子元素

1 个答案: