2011-03-06 18 views
6

¿Cómo se elimina un elemento de un jQuery Accordion? Estoy tratando de darle al usuario la posibilidad de eliminar un elemento de una base de datos, que se muestra en un acordeón, y hacer que ese elemento se desvanezca después. Intenté ocultar el DIV padre del artículo pero el encabezado permanece y el acordeón no funciona correctamente después.Cómo quitar el elemento de acordeón de jQuery

Aquí es el marcado (uso básico acordeón):

<div id="accordion"> 
<h3><a href="#">The Title - Item 1</a></h3> 
<div> 
The Content - Item 1 
<a href="#" class="deleteItem">Delete</a> 
</div> 
<h3><a href="#">The Title - Item 2</a></h3> 
<div> 
The Content - Item 2 
<a href="#" class="deleteItem">Delete</a> 
</div> 
</div> 

Gracias!

Respuesta

12

asumiendo que estás en el evento click de un niño de la div de contenido, se vería algo como esto:

var parent = $(this).closest('div'); 
var head = parent.prev('h3'); 
parent.add(head).fadeOut('slow',function(){$(this).remove();}); 

aquí es un working example. no estoy seguro de que el acordeón no funcione después, pero si no funciona, intente reiniciarlo.

+0

Gracias, funciona bastante bien. Me sorprendió cuando busqué una solución para encontrar que, o bien no es algo que la gente suele intentar. Encontré un hilo pero nunca fue resuelto. Gracias por su ayuda – NightMICU

+0

no hay problema. eso es similar a cómo lo he hecho cuando sea necesario. parece que debería haber una mejor forma de construir un acordeón que usar dos elementos completamente independientes, pero nunca he tenido ganas de hacer el mío. –

0

Si tenemos una condición como esta, ¿cómo eliminamos el panel en particular? Y después de eliminar el panel con la ayuda de Jquery, también puedo llamar al servlet. Lo intenté mucho pero no pude. Por favor ayuda.

    <% for(Entity result:pq.asIterable()) { 
        String geeta=(String)result.getProperty("Title"); 
        String fkey1 = result.getProperty("fkey").toString(); 

         %> 
         <div class="container"> 
          <div class="panel-group"> 
          <div class='panel panel-default'> 
           <div class='panel-heading panelHeading'> 
       <input id ="org" type="hidden" name="key" value="<%=fkey1%>" /> 
      <h4 class='panel-title '>+&nbsp<%=geeta %><a class="close">&times;</a></h4> 
           </div>  
        <div class='panel-body panelBody' style='display:none;'> 
        <a href="/update.jsp?key=<%=fkey1%>" target="blank"><h4><%=result.getProperty("Author") %></h4></a> 
        </div> 
        </div> 
       </div> 
       </div>      
          <% }%> 
Cuestiones relacionadas