Question

I am using jQuery now to dynamically generate DIVs based off user input. With the nature of how these are generated and formatted, there’s no direct parent/child relationship between the DIVs. In fact, I suppose the simplest way to explain it is the generation of a tree. I want to be able to create a custom hierarchy such that if an element at the top of the tree is deleted, so are all of it’s pseudo-children.

A somewhat visiual example follows below. The Diagram follows a horizontal hierarchy.

Level 1   Level 2    Level 3
-----------------------------

   X        X          X  \
                       X   | >> These 3 elements are pseudo-children of 
                       X  /     the first elements in level 1 and level 2

            X   <<<<<< X  << The element in level 2 is pseudo-child of  
                       X     the first element in level 1

   X        X          X

            X          X
                       X     

UPDATE:

Code Example:

<tr>
  <td>Level1</td>
  <td>Level2</td>
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td>Level2</td>
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>

etc… (matching the diagram)

Answer 1

I think what you want is the Flexible Box Module in HTML5. See a really nice set of articles about it here

And the playground http://flexiejs.com/playground/ (along with a x-browser javascript library)

---

My guess is the only way to do this with a table in the UI is to also store a tree in memory and then use that to “know” what to delete.

---

Maybe I’m missing something but what is wrong with this:

<div id="a">
   <div id="b">
      <div id="c" />
      <div id="d" />
      <div id="e" />
   </div>
   <div id="f">
      <div id="g" />
      <div id="h" />
   </div>
</div>
<div id="i">
   <div id="j">
      <div id="k" />
   </div>
   <div id="l>
      <div id="m" />
   </div>
</div>



Level 1   Level 2    Level 3
-----------------------------

   a        b          c  \
                       d   | >> These 3 elements are pseudo-children of 
                       e  /     the first elements in level 1 and level 2

            f   <<<<<< g  << The element in level 2 is pseudo-child of  
                       h     the first element in level 1

   i        j          k

            l          m
                       n