Simplemente quiero eliminar el elemento <button> pero mantener el texto en el botón en un max-width: 768px usando JavaScript. Entiendo que actualmente es jQuery. Lo tengo funcionando para eliminar el botón, pero no puedo hacer que funcione la condición de consulta de medios.
Aquí está el botón, eliminado con 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>Esto es lo que intenté quitar el botón con una condición de consulta de medios, pero no funciona:
const mediaQuery = window.matchMedia('(max-width: 768px)'); if (mediaQuery.matches) { $(".rent").replaceWith(function() { return $(this).text(); }); }Aquí hay una actualización que funciona a mitad de camino con el detector de eventos, pero se rompe al cambiar el tamaño.
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>Su código de reemplazo debería funcionar, solo depende de cómo y cuándo lo llame.
Aunque supongamos que aún desea que el botón haga lo que sea que haga, puede diseñar el botón para que parezca texto usando las reglas css @media .
@media only screen and (max-width: 480px) { button.rent { background-color: transparent; border: none; } } <button class="rent">RENT</button>