Ocultar elementos dinamicos en jquery o js

20113784 · #1 (**permalink**) 20/08/2015, 10:27

al crear un elemento dinamico lo creo junto con un span cerrar quisiera cerrar solo ese elemento que se crea arriba y el mismo boton cerrar... no los demas botones y los demas elementos, que solo le afecte a uno y el comportamiento de los otros siga igual a menos que le de al cerrar que le corresponda. se que esto se hace con this pero no se usarlo

este es mi codigo

<html>
<head>
<title>asda</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="blog-test-cont">
<p class="blog-test">Pulsa para probar</p>

</div>
<script>
var bt_count = 0;
$("#blog-test-cont").on("click", ".blog-test", function(){
$(this).after("<p class=\"blog-test\">Pulsa para probar " + (++bt_count) + "</p>" + " <span class=\"cerrar\">cerrar</span>");

$(".cerrar").click(function(){
$(this).find('.blog-test').hide();
});

});
</script>
</body>
</html>

Alexis88 · #2 (**permalink**) 20/08/2015, 11:16

Del mismo modo en el que delegas el clic al párrafo para añadir uno nuevo, delega la función que lo oculta.

Saludos

20113784 · #3 (**permalink**) 20/08/2015, 11:56

Me podrias dar un ejemplo?

Gracias

Alexis88 · #4 (**permalink**) 20/08/2015, 12:09

El ejemplo lo has puesto tú, por eso te digo que lo hagas como cuando añades elementos. Eso que haces es delegar un evento y es la mejor forma de trabajar con elementos dinámicos.

Yo te recomiendo añadir cada par de elementos en un contenedor y luego adherir este al <div> principal.

Código Javascript:

Ver original$("#blog-test-cont").on("click", ".blog-test", function(){
    $(this).after("
        <div class = 'ejemplo'>
            <p class = 'blog-test'>
                Pulsa para probar " + (++bt_count) + "
            </p>" + " 
            <span class = 'cerrar'>cerrar</span>
        </div>
    ");
});

Y para eliminarlo:

Código Javascript:

Ver original$("#blog-test-cont").on("click", ".cerrar", function(){
    //Tomamos al contenedor del <span> y, por ende, del párrafo y lo ocultamos
    $(this).parent().hide();
});

Saludos

20113784 · #5 (**permalink**) 20/08/2015, 12:38

Me funciono perfecto. Gracias :)