0

I simply want to remove the <button> element but keep the text in button at a max-width: 768px media query using JavaScript. I understand it is currently jQuery. I have it working to remove the button but cannot get the media query condition to work.

Here is the button, removed with JavaScript:

$(".rent").replaceWith(function() {
  return $(this).text();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="rent">Rent</button>

Here is what I tried to remove the button with a media query condition, but it does not work:

const mediaQuery = window.matchMedia('(max-width: 768px)');

if (mediaQuery.matches) {
  $(".rent").replaceWith(function() {
    return $(this).text();
  });
}

Here is update that half way works with event listener, but breaks on resizing back.

function checkMediaQuery() {
  const mediaQuery = window.matchMedia('(max-width: 768px)');
  if (mediaQuery.matches) {
    $(".rent").replaceWith(function() {
      return $(this).text();
    });
  }
}
window.addEventListener('resize', checkMediaQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="rent">Rent</button>
StephenW
  • 183
  • 14
  • What exactly is the desired result then? How does the text relate to the media query? Why does the below snippet “not work”? – Sebastian Simon Dec 03 '21 at 19:24
  • Currently button is in a list of menu links on desktop navbar. I want to remove the button element and just leave the text of the button in the list so the text in list matches other links without button in mobile view. I have tried other ways with CSS but I think this is the best solution. – StephenW Dec 03 '21 at 19:32
  • You kind of reiterated what was already in the question, but didn’t quite address my points. What is the relationship to the media query, specifically? How, where, and when should the media query be applied? How do we know it’s working? Please [edit] your post and clarify that. Consider the questions from my first comment, too. – Sebastian Simon Dec 03 '21 at 19:36
  • The media query is just the trigger at which the button element will be removed and just leave the text. I really don't know else how to explain it or give more details. How do we know it’s working? When the button is removed with just text left at the media query we know it is working. The relationship of the text to the media query is that the text is kept and the button is not. – StephenW Dec 03 '21 at 19:42
  • Ah, that clarifies it. Your current script only checks it once at page load. You could do a `resize` event listener. Does the button need to reappear when the window size is enlarged again? – Sebastian Simon Dec 03 '21 at 19:54
  • Yes, the button would need to reappear when enlarged back. – StephenW Dec 03 '21 at 20:06
  • I figured it out half way with an event listener, but it does not work on resizing back to desktop. Please see updated above. – StephenW Dec 03 '21 at 20:18
  • 2
    So why don't you just change the style with css media queries and not remove it? – epascarello Dec 03 '21 at 20:19
  • @epascarello Display none will remove everything in the button class. Having two elements to display one and hide the other is not idea. Making properties on button transparent on mobile still leaves button element which leaves padding and a mess. I have it half way working now above (see updated) but need to figure out the rest. – StephenW Dec 03 '21 at 20:24
  • I rather remove the padding than rely on JavaScript to add and remove content. I guess you are not using a framework for CSS. Lot of them have "link" type of class that resets the button to look like a link. – epascarello Dec 03 '21 at 20:28
  • `const mediaQuery = window.matchMedia('(max-width: 768px)');` needs to be _inside_ the listener, so that it can be evaluated every time. – Sebastian Simon Dec 03 '21 at 20:29
  • @SebastianSimon Thanks, I changed above, but it still breaks on resizing back. – StephenW Dec 03 '21 at 20:37
  • @epascarello Doesn't html add properties in the element itself that can't be removed? – StephenW Dec 03 '21 at 20:40
  • No clue what that means. Not sure what can not be removed. https://stackoverflow.com/a/1368286/14104 – epascarello Dec 03 '21 at 20:42

1 Answers1

0

Your replace code should work, just depends on how and when you call it.

Although assuming you still want the button to do whatever it does, you could just style the button to look like text using css @media rules.

@media only screen and (max-width: 480px) {
  button.rent {
    background-color: transparent;
    border: none;
  }
}
<button class="rent">RENT</button>
PoorlyWrittenCode
  • 1,003
  • 1
  • 7
  • 10