删除最后一个子元素后删除父元素

Question

我在页面上有一个元素列表,为了讨论我们可以说我有以下内容:

<div id="group_01">
  <div id="entry_1-01">stuff <a href="delete">x</a></div>
  <div id="entry_1-02">stuff <a href="delete">x</a></div>
</div>

<div id="group_02">
  <div id="entry_2-01">stuff <a href="delete">x</a></div>
  <div id="entry_2-02">stuff <a href="delete">x</a></div>
</div>

删除链接调用Ajax请求并删除该条目,在成功的Ajax调用之后,将从页面中删除条目div.我的问题是:

如果删除了所有条目后,如何删除包含组div？

我希望这是一个足够详细的问题.我觉得这不是什么新鲜事,但是两天的搜索没有任何结果.

Answer 1

在删除子元素之前,获取其父元素,计算子元素数,然后在删除子元素后,如果子元素数为零,则删除父元素.这是一段快速的示例代码:

function d (x)
{
    var e = document.getElementById(x);
    var p = e.parentNode;
    p.removeChild (e);
    if (p.childNodes.length == 0) {
        var pp = p.parentNode;
        pp.removeChild (p);
    }
}

我向你的div添加了onclicks,如下所示:

<div id="group_01">
  <div id="entry_1_01">stuff 11<a onclick="d('entry_1_01');" href="#delete">x</a></div>
  <div id="entry_1_02">stuff 12<a onclick="d('entry_1_02');" href="#delete">x</a></div>
</div>

我还将链接更改为"#delete".你可以用各种方式整理它.