On one of my websites I want to remove a specific HTML element if the screen is smaller than 767px (on mobile devices).
The following piece of HTML is used 9 times on the page:
<div class="price-list__item-desc"> </div>
So all 9 pieces of HTML have to be removed only on mobile devices.
I already included the following jQuery file on the website:
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();
}
});
However, the code is not working and the pieces of HTML still show up on mobile devices. I know there might be a very easy fix for this particular objective. But after searching the internet for two days I have come across so many different options that actually made me more confused.
Would very much appreciate any help, thanks in advance!
In the first method, when the page width changes, the div.price-list__item-desc element is hidden or shown using jQuery by controlling the page width.
In the method you developed, the anonymous function is not run to hide the item when the page changes; you need to use event handler method. In the structure I developed, the onresize event is affected when the page width changes. This way I can catch this event when the page width changes.
$( 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>there's nothing calling your function. Use media queries instead.
UPDATE: I added some js to solve your problem. If you are trying to hide (so the div still takes up space but doesn't show anything) then your question doesn't really make sense. If you want to remove the div then set display to none. The js is used to grab the divs that you want
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>