Clonar una manera sencilla de entenderlo con JQuery

HTML
<div class="caja-mensajes">
    <div class="msj">
        <button id="remover">-</button><button id="clonar">+</button><br>
        <textarea rows="5" cols="40">Clóname</textarea>
    </div>
        <div class="msj">
        <button id="remover">-</button><button id="clonar">+</button><br>
        <textarea rows="4" cols="10">NO CLONAR</textarea>
    </div>
    <div class="msj">
        <button id="remover">-</button><button id="clonar">+</button><br>
        <textarea rows="2" cols="30">Me clonaron</textarea>
    </div>

</div>
CSS
textarea{
    background:#fcf3cf;
}
JS
$(document).ready(function(){

    //clonar
    $(document).on("click",".caja-mensajes #clonar",function(){
        
        var clonar = $(this).parent(".msj").clone(); //clonar
                     $(this).parent(".msj").after(clonar); //mostrar
    });
    
    //remover
    $(document).on("click",".caja-mensajes #remover",function(){
        $(this).parent(".msj").remove();
    });
    
});

Autor: Saymon

Publicado: 24/02/2019

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)


Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home/clas88ie/public_html/lib/general.php on line 254

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home/clas88ie/public_html/lib/general.php on line 254

Deja tu comentarioComentarios 1

Diego Hace 7 años
Genial creare mi propia versión para un proyecto que estoy desarrollando. A ver como me sale.
0 0 | Responder | Reportar spam