Ways to remove the initial row of inline-block divs

Question

Ways to remove the initial row of inline-block divs

My webpage is filled with inline-block divs that are contained within a larger div like so:

<div class="container">
      <div class="text">Text 1</div>
      <div class="text">Text 2 ... rest of the numbers here ...</div>
</div>

These divs wrap around in rows, and I want to be able to delete the first row of them. If only a portion of the first row appears due to scaling, I want to delete just those particular elements.

I'm unsure about which JavaScript method would work best for this task, but here's a JSFiddle for reference. It would be preferable not to use JQuery for this solution.

javascript html css

Answer 1

Answer №1

To find out how many items can fit in a row within a container of known width, follow these steps: first calculate the width of each item and include any margins, then determine the number of items that can fit in a row by dividing the container's width by the item's width. Finally, remove that number of items from the start of the list.

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>

Answer 2

To find out how many items can fit in a row within a container of known width, follow these steps: first calculate the width of each item and include any margins, then determine the number of items that can fit in a row by dividing the container's width by the item's width. Finally, remove that number of items from the start of the list.

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>

Ways to remove the initial row of inline-block divs

Answer №1

Similar questions

Ensure that the Bootstrap 5 modal and backdrop are sized to fit the parent container's width and height rather than filling the entire screen

The inverse function for Ember Handlebars helper options is experiencing an undefined error

Determining if a component is nested within itself in Angular 6 is a crucial task

Identifying specific text enclosed within tags in an external file using PHP

Looking for a solution to eliminate Parsing Error: Unexpected Token when developing with React? I've already implemented ESLint and Prettier

What is the best way to capitalize the first letter of a string in JavaScript?

access the ckeditor within the frame

Ways to incorporate a tertiary tier in my CSS dropdown navigation

Working with dynamic checkbox values in VueJS 2

Showing the name of a class

Retrieving information from a JSON document in IONIC with the help of AngularJS

New parents, same name D3.JS

Is there a method to obtain the compiled CSS for an Angular 2+ component?

Surveillance software designed to keep tabs on how long visitors remain on external websites

How can I ensure that all the text is always in lowercase in my Angular project?

Update the header background color of an AG-Grid when the grid is ready using TypeScript

Eliminate the flickering effect on the dropdown menu

Tips for filling in the values for the options in a select dropdown menu

Attitude: Defiant and Ignoring Authority

Simultaneous opening of several bootstrap collapse panels with a single button press