I have a list of elements on a page, for the sake of discussion we can say I have the following:

<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>

The delete link calls an Ajax request and deletes the entry, after a succesful Ajax call, the entry div is removed from the page. My question is:

How can I remove the containing group div once all of it's entries have been deleted?

I hope that's a detailed enough question. I feel like this isn't anything new, yet two days of search has resulted in nothing.

I have a list of elements on a page, for the sake of discussion we can say I have the following:

<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>

The delete link calls an Ajax request and deletes the entry, after a succesful Ajax call, the entry div is removed from the page. My question is:

How can I remove the containing group div once all of it's entries have been deleted?

I hope that's a detailed enough question. I feel like this isn't anything new, yet two days of search has resulted in nothing.

• javascript
• prototype

4 Answers 4

Before you delete the child element, get its parent, count the number of children, and then after deleting the child, delete the parent if the child count is zero. Here is a quicky piece of sample code:

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);
    }
}

I added onclicks to your divs like this:

<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>

I also changed the link to "#delete". You could tidy this up in various ways.

A function like this should would work:

function removeNodeIfEmpty(node) {
   var container = document.getElementById(node);
   var nodeCount = 0;

   for (i = 0; i < container.childNodes.length, i++) {
       if (container.childNodes[i].nodeType == 1) {
           nodeCount += 1;
       }
   }

   if (nodeCount < 1) {
     container.parentNode.removeChild(node);
   }
}

This should account for the whitespace issue.

Assuming you do something like this to remove an entry:

entryDiv.parentNode.removeChild(entryDiv);

then you should be able to use the following code to remove the group div when the last child is removed:

var groupDiv = entryDiv.parentNode;
groupDiv.removeChild(entryDiv);
if (!groupDiv.firstChild) {
    groupDiv.parentNode.removeChild(groupDiv);
}

...although you need to watch out for whitespace-only text nodes, if these entries haven't been created directly by script.

Really depends what library you're using

http://docs.jquery./Traversing/parent#expr

should be a suitable expression