Remove attribute from a DIV only in mobile version

Question

I would like to remvover the href of an element only in the mobile version, which would be at 769px, the href that I would like to remove is from a menu, this menu is the same as the desktop version, only gets another css when entering at 769px, I tried to add a new class when entering 769px to be able to modify this href without having to go through the desktop menu, only it doesn’t work, when it comes back the desktop version is with href removed.

That class .menu-mobile only exists at 769px and disappears after passing 769px, but since the menu is the same in both sizes it only gets one more class, I believe this is the reason why it doesn’t work, because it comes back it only loses the class, but the change is already made so losing this class has no effect whatsoever. How could I fix this? Remove href only at 769px.

Code I tried to use

$j(document).ready(function() {
    $j('.menu-mobile a').removeAttr('href');
});

Answer 1

This code will work in modern browsers. It adds (or maintains) the hrefs when resolution is greater than or equal to 769px and removes them when it is less than or equal to that, whenever the page is charged or resized. I created an array to store hrefs and retrieve them when necessary:

temp_href = [];
$(window).on("load resize", function(){
    els = $(".menu-mobile a");
    if(window.innerWidth <= 769){
        for(x=0;x<els.length;x++){
            if(temp_href.length != els.length){
                temp_href.push(els.eq(x).attr("href"));
            }
            els.eq(x).removeAttr('href');
        }
    }else if(temp_href.length != 0){
        for(x=0;x<els.length;x++){
            els.eq(x).attr('href',temp_href[x]);
        }
    }
});

temp_href = [];
$(window).on("load resize", function(){
	els = $(".menu-mobile a");
	if(window.innerWidth <= 769){
		for(x=0;x<els.length;x++){
			if(temp_href.length != els.length){
				temp_href.push(els.eq(x).attr("href"));
			}
			els.eq(x).removeAttr('href');
		}
	}else if(temp_href.length != 0){
		for(x=0;x<els.length;x++){
			els.eq(x).attr('href',temp_href[x]);
		}
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-mobile">
	<a href="#1">Link 1</a>
	<br />
	<a href="#2">Link 2</a>
</div>

Answer 2

Use "window.innerWidth" it will pick up the total site size.

$(document).ready(function() {  
   var windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }
});

Try that code then:

function eDesktop() {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    return false;
  } else {
    return true;
  }
}

if(!eDesktop){
  $('.menu-mobile a').removeAttr('href')
}

jQuery(document).ready(function($) {
      if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )         {
         
          $('.teste2').removeClass('teste');
       }
 });

.teste {
width: 500px;
height: 500px;
background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste teste2">
</div>

Answer 3

Only complementing, to get control of browser resizing just use the method resize of jquery, example

$(document).ready(function() {  
   windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }

function onResize(){
   windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }
                   }

$(window).on('resize', onResize);

});