Remover div's dinámicos

Carxl · #1 (**permalink**) 13/10/2010, 09:16

Qué tal?

Bien...

Tengo este código que genera div's con id dinámicos:

Código Javascript:

Ver original<script type="text/javascript">
    $(function(){
        var ndivs = 1;
        $('#adicionarDiv').click(function(){
            //$('#contenedorDivs').html('<div class="hhh"><p>Hola!</p></div>');
            $('<div class="hhh" id="'+ndivs+'"><p><input id="borrarDiv'+ndivs+'" type="button" name="borrarDiv'+ndivs+'" value="Borrar Div" /></p><p>'+ndivs+'</p></div>').appendTo('#contenedorDivs');
            ndivs++;
        })
 
        $('#borrarDiv1').live('click', function(){
            $('#1').remove();
        })
    });
</script>

Como esos id son dinámicos, que instrucción me serviría en Jquery para decirle que elimine el div con el id correspondiente que den click (por ahora tengo una instrucción que elimina siempre el div con id 1 xD).

Si se fijan, el html dinámico que genero, genera un botón que es su respectivo eliminar:

Código Javascript:

Ver original<input id="borrarDiv'+ndivs+'" type="button" name="borrarDiv'+ndivs+'" value="Borrar Div" />

La idea sería que al picar en su respectivo botón, elimine ese div dinámico.

Espero me haya explicado bien

Gracias de nuevo.

Dany_s · #2 (**permalink**) 13/10/2010, 13:19

Ahora que lei tu otro post entiendo porqué querés los id dinámicos. Pero no sirven.

Tenés que ver como manejarte por tu estructurahttp://api.jquery.com/category/traversing/
, si ves cada ejemplo de la doc para ver que hace cada cosa se te va a ser la vida más fácil y eso es una de las ventajas de usar un framework, de eso se trata.
Si tenes varios items y dentro de cada uno tenés varios elementos como inputs, parrafos o lo que se y queres tener un botón, div, link lo que sea para eliminar ese item ya sabés que tenes un contenedor, en tu ejemplo tu contenedor es un div con clase 'hhh' entonces ya sabes que desde el elemento clickeado para borrar tenes que subir hasta el div.hhh y eliminar, sencillo.

Código HTML:

Ver original<html>
<head>
    <title>Pruebas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
    $('.hhh input').click( function (){
        $(this).closest('.hhh').remove();
    });
});
</script>
<style>
    .hhh{background:green;}
</style>
</head>
<body>
 
    <div class="hhh"><div>yyy<input type="button" value="Borrar Div 1" /></div><p>Div 1</p></div>
    <div class="hhh"><input type="button" value="Borrar Div 2" /><p>Div 2</p></div>
    <div class="hhh"><input type="button" value="Borrar Div 3" /><p>Div 3</p></div>
    <div class="hhh"><input type="button" value="Borrar Div 4" /><p>Div 4</p></div>
    <div class="hhh"><input type="button" value="Borrar Div 5" /><p>Div 5</p></div>
    <div class="hhh"><input type="button" value="Borrar Div 6" /><p>Div 6</p></div>
    <div class="hhh"><input type="button" value="Borrar Div 7" /><p>Div 7</p></div>
    <div class="hhh"><input type="button" value="Borrar Div 8" /><p>Div 8</p></div>
 
</body>
</html>

Ahi utilizo evento click, deberias usar vos el live

mayid · #3 (**permalink**) 14/10/2010, 07:55

Ah! Si, traversing es recorrer la jerarquia de elementos del DOM: parents, childs, siblings.

Como siempre, a un elemento que tiene un evento se lo accede con $(this), y luego desde ahí se accede a donde se necesite con traversing.

tredio · #4 (**permalink**) 14/10/2010, 18:59

podrias hacer:

Código Javascript:

Ver original$('div.hhh > input[type="button"]').live(function(){
    $(this).parent().fadeOut('slow',function(){$(this).remove();});
});

nota: el fadeOut es para hacer una simple animacion, si no lo quieres asi solo quitalo y coloca el remove

Carxl · #5 (**permalink**) 02/11/2010, 16:32

Disculpen la demora...

Gracias a los 3 por sus mensajes :) Entendido!

Sólo para aclarar que para el ejemplo de Dany_S, como mis div's se agregan dinámicamente, para eliminarlos, se debe usar la función live.

Código Javascript:

Ver original$('.hhh input').live('click', function(){
            $(this).closest('.hhh').remove();
        });

Por cierto tredio, tu ejemplo no me funcionó

Saludos.