自定义 jQuery 层次结构

Question

我现在使用 jQuery 根据用户输入动态生成 DIV。由于这些是如何生成和格式化的，DIV 之间没有直接的父/子关系。事实上，我想最简单的解释方式就是树的生成。我希望能够创建一个自定义层次结构，这样如果树顶部的元素被删除，那么它的所有伪子元素也会被删除。

下面是一个有点形象化的例子。图表遵循水平层次结构。

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     

更新：

代码示例：

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

等等...（匹配图表）

Answer 1

我认为您想要的是 HTML5 中的 Flexible Box Module。查看一组非常好的关于它的文章here

还有操场 http://flexiejs.com/playground/（以及 x-browser javascript 库）

---

我的猜测是，在 UI 中使用表执行此操作的唯一方法是将树也存储在内存中，然后使用它来“知道”要删除的内容。

---

也许我遗漏了什么，但这有什么问题：

<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