En uno de mis sitios web, quiero eliminar un elemento HTML específico si la pantalla es más pequeña que 767 px (en dispositivos móviles).
La siguiente pieza de HTML se usa 9 veces en la página:
<div class="price-list__item-desc"> </div>Por lo tanto, las 9 piezas de HTML deben eliminarse solo en dispositivos móviles.
Ya incluí el siguiente archivo jQuery en el sitio web:
jQuery(function ($) { if (window.matchMedia('(max-width: 767px)').matches) { $('<div class="price-list__item-desc"> </div>').hide(); } else { $('<div class="price-list__item-desc"> </div>').show(); } });Sin embargo, el código no funciona y las piezas de HTML aún aparecen en los dispositivos móviles. Sé que podría haber una solución muy fácil para este objetivo en particular. Pero después de buscar en Internet durante dos días, encontré tantas opciones diferentes que en realidad me confundieron más.
Agradecería mucho cualquier ayuda, gracias de antemano!
En el primer método, cuando cambia el width de la página, el div.price-list__item-desc se oculta o se muestra usando jQuery controlando el width de la página.
En el método que desarrolló, la función anónima no se ejecuta para ocultar el elemento cuando cambia la página; necesita usar el método del controlador de eventos. En la estructura que desarrollé, el evento onresize se ve afectado cuando cambia el ancho de la página. De esta manera puedo detectar este evento cuando cambia el ancho de la página.
$( document ).ready(function() { window.onresize = function() { console.log(`Width: ${$( window ).width()}`); var divs = document.querySelectorAll("div.price-list__item-desc"); if (window.matchMedia('(max-width: 767px)').matches) { $('div.price-list__item-desc').removeClass("active"); for (var i = 0; i < divs.length; i++) { if(divs[i].innerHTML === ' ') divs[i].style.display = "none"; else divs[i].style.display = "block"; } } else { $('div.price-list__item-desc').addClass("active"); } } window.onresize(); }); div.price-list__item-desc { background-color: red; display: none; } .active{ display: block !important; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="price-list__item-desc"> </div> <div class="price-list__item-desc">1</div> <div class="price-list__item-desc"> </div> <div class="price-list__item-desc">2</div> <div class="price-list__item-desc"> </div>no hay nada llamando a tu función. Utilice consultas de medios en su lugar.
ACTUALIZACIÓN: agregué algunos js para resolver su problema. Si está tratando de ocultarse (por lo que el div aún ocupa espacio pero no muestra nada), entonces su pregunta realmente no tiene sentido. Si desea eliminar el div, configure la visualización en ninguno. El js se usa para agarrar los divs que quieras
let divs = document.getElementsByClassName('price-list__item-desc') for(let i = 0; i < divs.length; i++){ if (divs[i].innerHTML == " ")divs[i].classList.add('hide') } @media (max-width: 767px) { .hide{ display:none;} } <div class="price-list__item-desc"> </div> <div class="price-list__item-desc"> </div> <div class="price-list__item-desc"> </div> <div class="price-list__item-desc"> </div> <div class="price-list__item-desc"> </div> <div class="price-list__item-desc">6</div> <div class="price-list__item-desc">7</div> <div class="price-list__item-desc">8</div> <div class="price-list__item-desc">9</div>