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

What could be the reason behind the success of my API call in Chrome while encountering failure when implemented in my

I encountered an issue while making customizations to my default next.config.js file. Despite attempting various solutions, I consistently encountered an error regarding the invalid src property

Reverse row changes in Angular Ag-Grid with the click of a button

Express route encountered an error with an undefined value

Adjusting the line height of an inline-block div causes surrounding inline-block siblings to shift downward

Updating a single .jshintrc option for a folder

Missing Bootstrap 3 Options Menu trip away

Refresh the navigation bar on vuejs post-login

What is the best way to identify which JavaScript code is triggering or managing an event?

Is it possible to enable table scrolling within Semantic-UI-React by utilizing Next.js?

Express is encountering a non-executable MIME type of 'text/html' with Webpack

Unable to display script in the sources tab on NW.js 16

Refresh a page automatically upon pressing the back button in Angular

Is there a way to include an edit, delete, details, and create new icon in an @html.actionLink within MVC?

Using jQuery, retrieve the "select" element within a specific row of a

What could be causing the parameters to be empty in Next.js static site generation with getStaticProps?

Store the content of an HTML div using HTML5 Drag and Drop functionality in a MYSQL database

Achieving optimal performance with scoped CSS in Vue.js

Creating a dynamic link in Vue JS is a cinch!

Issue with Material-UI Nested Checkbox causing parent DOM to not update upon selection changes