0

Hola ayuda por favor necesito eliminar una clase que owl carrousel le da predeterminada a un div hijo , osea le crea otra div padre con class owl-item , ya que estoy haciendo un filtro y al lograrlo me oculta el hijo pero ese div padre queda vació como un espacio en blanco:

HTML:

    <div class="category_list" >
            <ul class="text-left pt-5 listado">Filtrar
                <li><a href="#" class="category_item" category="all">Todas</a></li>
                <li><a href="#" class="category_item" category="uno" >uno</a></li>
                <li><a href="#" class="category_item" category="dos">dos</a></li>
                <li><a href="#" class="category_item" category="tres">tres</a></li>
                <li><a href="#" class="category_item" category="cuatro">cuatro</a></li>
            </ul>
        </div>
     <div  class="owl-carousel owl-theme product-list ">
        <div class="product-item" category="clasificados" >
         <h4>uno</h4>
        </div>
        <div class="product-item" category="clasificados" >
         <h4>dos</h4>
        </div>
        <div class="product-item" category="clasificados" >
         <h4>tres</h4>
        </div>
        <div class="product-item" category="clasificados" >
         <h4>cuatro</h4>
        </div>
     </div>

JS

$('.category_list .category_item[category="all"]').addClass('ct_item-active');

  $('.category_item').click(function(e){

    var catProduct = $(this).attr('category');

        e.preventDefault();
       $('.product-item').css('transform','scale(0)');
        function hideProduct(){
           $('.product-item').hide();
       }setTimeout(hideProduct,400);
5
  • La función removeClass() de Jquery te podría ayudar. api.jquery.com/removeclass
    – phpMyGuel
    el 29 ene. 2019 a las 14:10
  • Hola miguel no , esa función no me serviría por que como todos los div tienen la misma clase se eliminarían todos , necesito es ocultar los que tienen los hijos div ya ocultados y así el 29 ene. 2019 a las 14:30
  • Podrías mostrarnos la estructura HTML que presenta el problema que nos mencionas y luego dejar claro a que divs deseas quitar la clase. Con los selectores de Jquery se puede determina a que divs deseas afectar con sus funciones, pero es difícil ayudarte sin que nos dejes claro esto que te comento.
    – phpMyGuel
    el 29 ene. 2019 a las 14:37
  • si claro pero mira es la misma que te comente en el espacio de arriba yo estoy ocultando con display none el div que tiene la clase ( .product-item ) y realiza la funcion normal pero como es un carrousel owl crea un div padre predeterminado con clase ( .owl-item) el cual entonces queda en espacio en blanco , al inspeccionar se detecta que ese div con clase (.product-item) tiene un div padre asi <div class="owl-item active" style="width: 268.333px; margin-right: 10px;"> el cual queda vacio por que el hijo ya tiene un display none el 29 ene. 2019 a las 14:48
  • Ahora si queda claro lo que deseas conseguir. Te escribo una respuesta.
    – phpMyGuel
    el 29 ene. 2019 a las 14:51

1 respuesta 1

0

Lo que necesitas podría conseguirse poniendo un display: none al padre del div que ya tienes oculto.

Para ello podemos apoyarnos en la función parent() de Jquery:

$('.product-item').parent().css('display', 'none');

Este selector buscaría el padre directo de tu elemento .product-item y le pondría un display: none.

EDIT

Si tan solo quieres ocultar los div que sean padre de un elemento .product-item que esté oculto puedes usar lo siguiente:

$('.product-item:hidden').parent().css('display', 'none');

A través del selector :hidden se puede conseguir seleccionar el padre de los elementos .product-item que no sean visibles.

Referencia: parent()

2
  • a super miguel mil gracias funciono bien , ya lo que me toca verificar es como hacer para que se le de solo a los que tienen el div hijo oculto , ya que se los esta dando a todos. el 29 ene. 2019 a las 15:39
  • He añadido una edición para ayudarte en como podrías conseguir eso que me comentas.
    – phpMyGuel
    el 29 ene. 2019 a las 16: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.