1

Pues vuelvo a tener un problema inexplicable con jQuery:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <div id=”listado”>
         <ul>
               <li>Renault <button type=”button” class=”btn-remove”>Borrar</button></li>
               <li>Honda <button type=”button” class=”btn-remove”>Borrar</button></li>
               <li>Ford <button type="button" class=”btn-remove”>Borrar</button></li>
         </ul>
    </div>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js.js"></script>
  </body>
</html>

Simplemente quiero añadirle una función click a la clase btn-remove. Esto es lo que tengo en mi js:

$(document).ready(function(){

  $('.btn-remove').click(function() {
    console.log('entro');
      $(this).parent().remove();
  });

});

Si en vez de seleccionar btn-remove selecciono button, me funciona. Pero esto no puede ser porque habrá más botones en mi html. He probado a seleccionarlo de las siguientes maneras:

$('button .btn-remove')
$('li button .btn-remove')
$('ul li button .btn-remove')
$('#listado ul li button .btn-remove')

Pero de ninguna manera lo encuentra... ¿Alguien ve el error?

1 respuesta 1

2

El código está OK, pero te traiciona el tipo de comillas que estás usando:

Esto no es reconocido: ”btn-remove” esto sí: "btn-remove".

Por otra parte, considera cargar tus librerías en el head, no al final. Y también, renuncia ya de una vez al uso de $(document).ready(function(){ fue declarado obsoleto en jQuery 3 y quizá lo saquen del núcleo de jQuery 4. Si tienes miles o cientos de archivos con su uso vas a tener problemas cuando quieras usar jQuery 4 en un futuro. Debes cambiarlo por $( function() {

$( function() { 

  $('.btn-remove').click(function() {
    console.log('entro');
      $(this).parent().remove();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <div id="listado">
         <ul>
               <li>Renault <button type="button" class="btn-remove">Borrar</button></li>
               <li>Honda <button type="button" class="btn-remove">Borrar</button></li>
               <li>Ford <button type="button" class="btn-remove">Borrar</button></li>
         </ul>
    </div>

6
  • 1
    Me ganaste la respuesta, bien identificadas las comillas, jamás había visto unas dobles invertidas Commented el 27 mar. 2020 a las 20:44
  • @AlbertoSiurob sí, es raro, quizá el editor de código o la configuración del OS le está haciendo una mala jugada. Aunque es raro que un editor de código ponga ese tipo de comillas.
    – A. Cedano
    Commented el 27 mar. 2020 a las 20:45
  • Pues he copiado y pegado TAL CUAL y sigue sin funcionar. He probado a hacer: Commented el 27 mar. 2020 a las 20:58
  • ` if(".btn-remove"){ console.log('existo'); }` y efectivamente me devuelve el log... Estas cosas me desesperan... Seguiré intentándolo o crearé un proyecto nuevo. Commented el 27 mar. 2020 a las 20:58
  • 1
    @InfiniteRoads tienes que revisar todas las comillas, en todo el código tenías estas comillas que no son correctas para etiquetar en HTML. Debes cambiarlas todas por ".
    – A. Cedano
    Commented el 27 mar. 2020 a las 22:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.