删除本机css网格中的行

时间:2017-10-11 12:35:48

标签: html css

我需要能够删除本机css网格中的一行..但由于我们只是指定列而行是自动的我无法找到方法..有没有办法包装列不会影响网格布局的div?

继承我拥有的东西和小提琴:

HTML:

<div class="container">
  <div id="id0" class="col colSpan3"></div>
  <div class="col rowSpan2"></div>
  <div class="col rowSpan2"></div>
  <div class="col rowSpan2"></div>
</div>

的CSS:

.container {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 6px;
}

.col {
  height: 100px;
  border: solid 1px black;
}

.colSpan2 { grid-column: auto / span 2;}
.colSpan3 { grid-column: auto / span 3;}

.rowSpan2 { grid-row: auto / span 2;}
.rowSpan3 { grid-row: auto / span 3;}

JS:

var id0 = document.getElementById("id0");
id0.onclick = function() { id0.remove();  }

https://jsfiddle.net/x8t0a82b/1/

我可以删除第一行,因为它跨越所有列,但我无法找到删除整行的方法。

2 个答案:

答案 0 :(得分:0)

为作业使用Css变量:

:root {
  --rowNum: 4;
  --colNum: 5;
  --gridHeight: 120px;
}

.wrapper {
  display: grid;
  grid-template-rows: repeat(var(--rowNum), var(--gridHeight));
  grid-template-columns: repeat(var(--colNum), auto);
}
.grid-item {
  grid-column-start: auto;
  grid-row-start: auto;
  margin: 5px;
}

<div class="wrapper">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

function del() {  
  $('.grid-item:last-child').parentNode.removeChild($('.grid-item:last-child'));
  updateVar();
}

function updateVar(action) {
  let htmlStyles = window.getComputedStyle($("html"));
  let rowNum = parseInt(htmlStyles.getPropertyValue("--rowNum"));
  let colNum = parseInt(htmlStyles.getPropertyValue("--colNum"));
  let gridItemsCount = document.querySelectorAll('.grid-item').length;
  document.documentElement.style.setProperty(`--rowNum`, Math.ceil(gridItemsCount/colNum));  
}

答案 1 :(得分:0)

您可以在每个元素上设置一个类,然后使用.querySelectorAll()删除它们:

HTML

<div id='theGrid'>
    ...
    <div class='cell1 row1'>1-1</div>
    <div class='cell2 row1'>2-1</div>
    <div class='cell3 row1'>3-1</div>
    ...
</div>

JS

const grid = document.getElementById('theGrid');

Array.from(grid.querySelectorAll('row1'))
    .forEach(domNode => domNode.parentNode.removeChild(domNode));