Javascript jQuery从空列和空行中清除flexbox结构

我正在创建一个jQuery，通过删除所有额外的行和列来优化表结构：

• a） 包含少于2个子元素
• b） 包含重复的容器（

  .column

  不能有子容器

  。column

  ，

  。row

  不能有子容器

  。row

  ）

我仍然没有让它工作，它运行了6个步骤（在评论中可见）

将

#示例

转化为

#解决方案

需要什么

var选择；
//1. 选择所有行和列
选择=$（'#示例'）。查找（'.row、.column'）；
//2. 取消选择包含多个子项的行和列
selection=selection.not（'.row:has（div:nth类型（2）），.column:has（div:nth类型（2）））；
//3. 取消选择包含单元格的行和列
selection=selection.not（'.row:has（.cell:nth类型（1）），.column:has（.cell:nth类型（1）））；
//4. 删除多余的div
控制台日志（选择）；
//css（'border'，'1px黄色实体'）//将其涂成黄色（用于测试）
selection.children（）.first（）.unwrap（）；
//5. 选择重复的行和列
selection=$（“#示例”）.find（“.row:has（.row），.column:has（.column）”）；
//6. 从第一次移除后移除冗余div
selection.children（）.first（）.unwrap（）
.grid{
显示器：flex；
最小高度：5px；
}
.行{
显示器：flex；
柔性生长：1；
边框：1px纯红；
}
.细胞{
柔性生长：1；
弹性基准：20px；
边框：1px纯绿色；
}
.栏目{
显示器：flex；
柔性生长：1；
弯曲方向：立柱；
边框：1px纯蓝色；
}
一行
.专栏，
.细胞{
保证金：5px；
}

例子
解决方案
根据您给出的公式，尝试以下操作

$（'#示例'）。查找（'.column'）。每个（函数（）{
$（this.find（“.column”）.each（function（）{
$（this.unwrap（）；
});
if（$（this.children（）.size（）<2&$（this.find）（.cell”）.size（）==0）
{
$（this.remove（）；
}
});
$（“#示例”）.find（“.row”）.each（函数（）{
$（this.find（“.row”）.each（function（）{
$（this.unwrap（）；
});
if（$（this.children（）.size（）<2&$（this.find）（.cell”）.size（）==0）
{
$（this.remove（）；
}
});
这是对约束的更新版本的解决方案，约束a被减少到最小值以提供更好的结果（可以将此示例减少到最少一行）


//约束A
$（“#示例”）.find（“.row，.column”）.each（function（）{
if（$（this.children（）.size（）<2）{
$（this.children（）.first（）.unwrap（）；
}
});
//约束条件B
$（“#示例”）.find（“.column”）.each（函数（）{
if（$（this）.parent（）.hasClass（'column'））{
$（this.children（）.first（）.unwrap（）；
}
});
$（“#示例”）.find（“.row”）.each（函数（）{
if（$（this）.parent（）.hasClass（'row'））{
$（this.children（）.first（）.unwrap（）；
}
});
.row{
显示器：flex；
柔性生长：1；
边框：1px纯红；
}
.细胞{
柔性生长：1；
弹性基准：20px；
边框：1px纯绿色；
}
.栏目{
显示器：flex；
柔性生长：1；
弯曲方向：立柱；
边框：1px纯蓝色；
}
一行
.专栏，
.细胞{
保证金：5px；
}

解决方案
你能更精确地定义
空单元格和行吗
？从我刚才为整体方法包含的+1定义中，现在应该清楚了，一个小错误是
.column
包含一个
.row
元素，这是不允许的@彼得：谢谢。包含行元素的列会发生什么情况？
。应删除包含单个
。行的列
。删除
.column
将留下重复的
.row
容器，该容器也应删除。然后a）和b）都满足。这里有一个例子是的，它是有效的。即使是复杂的flexbox网格，它也能保持其结构。我还决定简化条件A，因为它创建了包含单个单元格的不可见行/列。
$('#example').find('.column').each(function(){
   $(this).find(".column").each(function(){
     $(this).unwrap();
   });
   if ($(this).children().size() < 2 && $(this).find(".cell").size() == 0 )
   {
      $(this).remove();
   }
});

$('#example').find('.row').each(function(){
   $(this).find(".row").each(function(){
     $(this).unwrap();
   });
   if ($(this).children().size() < 2 && $(this).find(".cell").size() == 0 )
   {
      $(this).remove();
   }
});