JQuery очистить структуру Flexbox от пустых столбцов и строк

Question

Я создаю JQuery, чтобы оптимизировать структуру таблицы, удаляя все лишние строки и столбцы, которые:

• а) содержат менее 2 дочерние элементы
• б) содержат дублировать контейнер (.column не может иметь ребенка .column, .row не может иметь ребенка .row)

Я все еще не работал, он работает в 6 шагов (видно в комментариях).

Что необходимо, чтобы превратить #example в #solution?

var selection; 
 
//1. Select all rows and columns 
 
selection = $('#example').find('.row, .column'); 
 
//2. Deselect rows and columns with more than 1 child 
 
selection = selection.not('.row:has(div:nth-of-type(2)), .column:has(div:nth-of-type(2))'); 
 
//3. Deselect rows and columns that contain cells 
 
selection = selection.not('.row:has(.cell:nth-of-type(1)), .column:has(.cell:nth-of-type(1))'); 
 
//4. Remove redundant divs 
 
console.log(selection); 
 
//selection.css('border', '1px yellow solid');//paint them yellow (for testing) 
 
selection.children().first().unwrap(); 
 
//5. Select duplicate rows and columns 
 
selection = $('#example').find('.row:has(.row), .column:has(.column)'); 
 
//6. Remove redundant divs since first removal 
 
selection.children().first().unwrap();

.grid { 
 
    display: flex; 
 
    min-height: 5px; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-grow: 1; 
 
    border: 1px solid red; 
 
} 
 
.cell { 
 
    flex-grow: 1; 
 
    flex-basis: 20px; 
 
    border: 1px solid green; 
 
} 
 
.column { 
 
    display: flex; 
 
    flex-grow: 1; 
 
    flex-direction: column; 
 
    border: 1px solid blue; 
 
} 
 
.row, 
 
.column, 
 
.cell { 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span>Example</span> 
 
<div id="example" class="grid"> 
 
    <div class="column"> 
 
    <div class="row"> 
 
     <div class="column"> 
 
     <div class="row"> 
 
      <div class="column"> 
 
      <div class="cell"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="column"> 
 
     <div class="row"> 
 
      <div class="cell"> 
 
      </div> 
 
      <div class="cell"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<span>Solution</span> 
 
<div id="solution" class="grid"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
    </div> 
 
    <div class="cell"> 
 
    </div> 
 
    <div class="cell"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Основываясь на формуле вы дали, попробуйте это demo

$('#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(); 
    } 
}); 

Answer 2

Это решение обновленной версии ограничений, ограничение было сведено к минимуму, чтобы обеспечить еще лучший результат (этот пример можно уменьшить до минимума одной строки).

//Constraint A 
 
$('#example').find('.row, .column').each(function() { 
 
    if ($(this).children().size() < 2) { 
 
    $(this).children().first().unwrap(); 
 
    } 
 
}); 
 

 
//Constraint B 
 
$('#example').find('.column').each(function() { 
 
    if ($(this).parent().hasClass('column')) { 
 
    $(this).children().first().unwrap(); 
 
    } 
 
}); 
 
$('#example').find('.row').each(function() { 
 
    if ($(this).parent().hasClass('row')) { 
 
    $(this).children().first().unwrap(); 
 
    } 
 
});

.row { 
 
    display: flex; 
 
    flex-grow: 1; 
 
    border: 1px solid red; 
 
} 
 
.cell { 
 
    flex-grow: 1; 
 
    flex-basis: 20px; 
 
    border: 1px solid green; 
 
} 
 
.column { 
 
    display: flex; 
 
    flex-grow: 1; 
 
    flex-direction: column; 
 
    border: 1px solid blue; 
 
} 
 
.row, 
 
.column, 
 
.cell { 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span>Solution</span> 
 
<div id="example" class="row"> 
 
    <div class="column"> 
 
    <div class="row"> 
 
     <div class="column"> 
 
     <div class="row"> 
 
      <div class="column"> 
 
      <div class="cell"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="column"> 
 
     <div class="row"> 
 
      <div class="cell"> 
 
      </div> 
 
      <div class="cell"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>