0

Estoy tratando de usar .hide() de jQuery para ocultar los parents de los li que tienen la misma clase. Aún no tengo éxito. Por alguna razón, puedo ocultar solo un parent, pero necesito llegar al segundo parent, y es ahí cuando .hide() no me está funcionando... Los li son aregados por medio de un append al presionar un botón. ¿Alguna idea?

function add() {
var element = document.getElementById("tasks");

$(element).append(

    '<div class="d-flex mt-4">'+

    '<span class="col-1">'+
    '<li class="not-done" onclick="done(this)">'+name+'</li>'+
    '</span>'+

    '<span class="col-3">'+
    '<button type="button" class="btn-edit">Edit</button>'+
    '</span>'+

    '</div>'
    )
}

$("#show-done").click(function() {

$("li.not-done").parent().parent().hide();

// $("li.done").show();

})
2
  • 1
    Te recomendaría que pudieras añadir también la parte del HTML, ya que en tu pregunta mencionas que tienes problemas con esa parte relacionada, y ayudaría a entender el problema mucho mejor. Por otro lado, no te recomendaría la forma en que lo estás abordando: ¿qué pasa si el día de mañana, otro desarrollador (o tu mismo), cambia la estructura del HTML para meter algún otro div entre medias? En ese caso el código es menos mantenible, ya que puede cambian esos dos niveles (.parent().parent()). Si puedes aportar ese fragmento de HTML, porfa, podremos completar la respuesta.
    – Sema
    el 29 dic. 2020 a las 10:58
  • No será mas fácil colocarle una clase o ID a tu parent y ocultar directamente este? así evitas los futuros errores que indica @Sema
    – Elboy
    el 29 dic. 2020 a las 15:23

1 respuesta 1

0

De entrada, tienes un HTML incorrecto, porque la etiqueta <li> solo debería usarse dentro de una lista <ol> o <ul> y, en caso de que la estés usando, <li> no debería estar dentro de otras etiquetas. Referencia (en inglés)

Esto es incorrecto:

<ul>
   <div>
      <span>
         <li></li>
      </span>
   </div>
</ul>

La forma en que deberías hacerlo, con los LI, como hijos directos de la lista:

<ul>
    <li>
        <div>
           <span></span>
        </div>
    </li>
</ul>

Aunque el HTML no es adecuado, puede funcionar con $.closest() para buscar en los ancestros, por selector:

  • Nombre de etiqueta a: $(elemento).closest('div')
  • ID de elemento (no le veo sentido, pero funciona): $(elemento).closest('#mi-div')
  • Clase del elemento: $(elemento).closest('.d-flex')
  • Cualquier otro selector válido

function add() {
  var element = document.getElementById("tasks");
  $(element).append(
    '<div class="d-flex mt-4">'+
    '<span class="col-1">'+
    '<li class="not-done" onclick="done(this)">'+name+'</li>'+
    '</span>'+
    '<span class="col-3">'+
    '<button type="button" class="btn-edit">Edit</button>'+
    '</span>'+
    '</div>'
  );
}
$('#add').on('click', add);

$("#show-done").click(function() {
  $("li.not-done").closest('div').hide();
});

$("#show-all").click(function() {
  $("li").closest('div').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tasks">
</ul>
<button id="add">Agregar</buton>
<button id="show-done">Ver solo finalizados</buton>
<button id="show-all">Ver todos</buton>

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.