0
248
VistasCómo eliminar la primera fila de divs de bloque en línea
Tengo un montón de divs de bloques en línea en mi página web,
<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>y se envuelven así:
Quiero poder eliminar la primera fila de ellos, que es en este caso 1-5. Pero si escalo esto a donde solo hay 1-3 en la primera fila, solo me gustaría eliminarlos. (usted lo consigue)
No tengo ni idea de qué tipo de javascript se puede aplicar para este caso de uso particular, pero para simplificar, aquí está el JSFiddle . Preferiría no usar JQuery.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Si el ancho de cada elemento es el mismo, puede obtener el ancho del contenedor, dividirlo por el ancho de cada elemento (para determinar la cantidad de elementos en cada fila) y luego eliminar esa cantidad de elementos desde el principio.
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
Denunciar
Responde la pregunta