0
250
ViewsHow to delete first row of inline-block divs
I have a bunch of inline-block divs on my web page,
<div class="container">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
<div class="text">Text 4</div>
<div class="text">Text 5</div>
<div class="text">Text 6</div>
<div class="text">Text 7</div>
</div>
and they wrap around like this:
I want to be able to delete the first row of them, that is in this case 1-5. But if I scale this to where only 1-3 are in the first row, I would only like to delete those. (you get it)
I don't have any clue what kind of javascript can be applied for this particular use case, but for simplicity, heres the JSFiddle. I would rather not use JQuery.
·
Juan Pablo Isaza
1 answers
Answer question0
If the width of each item is the same, you can get the width of container, divide by the width of each item (to determine the number of items in each row), then delete that many items from the start.
const item = document.querySelector('.text');
const itemWidth = item.offsetWidth + 2 * parseFloat(window.getComputedStyle(item).getPropertyValue("margin"));
const containerWidth = document.querySelector('.container').offsetWidth;
const itemsInFirstRow = Math.floor(containerWidth / itemWidth);
document.querySelectorAll('.text').forEach((e,i) => {
if(i < itemsInFirstRow) e.remove()
}).text {
height: 50px;
width: 50px;
background-color: red;
display: inline-block;
margin: 5px;
color: white;
text-align: center;
}
.container{
width:200px;
}<div class="container">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
<div class="text">Text 4</div>
<div class="text">Text 5</div>
<div class="text">Text 6</div>
<div class="text">Text 7</div>
</div>
·
Juan Pablo Isaza
Report
Answer question