Tengo un código de práctica donde estoy clonando un div de la izquierda a la derecha, y estoy tratando de borrar SOLO EL DIV CLONADO, pero se me borra el original y no es lo que estoy buscando.
Alguna idea...?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadTengo un código de práctica donde estoy clonando un div de la izquierda a la derecha, y estoy tratando de borrar SOLO EL DIV CLONADO, pero se me borra el original y no es lo que estoy buscando.
Alguna idea...?
puedes hacerlo haciendo referencia a this
osea al elemento clickeado luego buscas al parentElement
que es el cont-2-producto-#
y entonces si le aplicas el display:none;
ejemplo:
$(document).ready(function() {
$("#copiar-1").click(function(){
$("#cont-1-producto-1").clone().appendTo(".derecha");
});
// =============
$("#copiar-2").click(function(){
$("#cont-2-producto-2").clone().appendTo(".derecha");
});
});
html{background-color:#eee;}
body{margin:0 auto;color:#323232;max-width: 100%;line-height:1.5;padding:1em 3em;background-color:#fff;font-family:'Roboto',serif}
/* ===================== */
#copiar-1,#copiar-2{width:120px;height:30px;margin-top:15px;background:grey;padding:10px 0 5px;text-align:center;vertical-align:middle;color:#fff;cursor:pointer}
.izquierda{border:solid 2px black;height:200px;width:200px;float:left;text-align:center;padding:10px 0}
.derecha{border:solid 2px red;height:auto;width:200px;float:right;text-align:center;padding:10px 0}
#producto-1,#producto-2{display:inline-block;width:100px;margin:10px auto;padding:5px}
#producto-1{background:green;color:#fff}
#producto-2{background:lightblue;color:#000}
#equis-1,#equis-2{display:inline-block;width:24px;height:24px;vertical-align:middle;text-align:center;background:red;color:#fff;margin-left:10px;border-radius:3px;cursor:pointer}
/* ===================== */
.izquierda #equis-1,.izquierda #equis-2{display:none}
/*.izquierda #cont-producto-1 {display:none}*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:450px;">
<div class="izquierda">Div Original
<div id="cont-1-producto-1">
<div id="producto-1">Producto 1</div>
<div id="equis-1" onclick="this.parentElement.style.display='none';">X</div>
</div>
<div id="cont-2-producto-2">
<div id="producto-2">Producto 2</div>
<div id="equis-2" onclick="this.parentElement.style.display='none';">X</div>
</div>
</div>
<div class="derecha">Div Copia</div>
<div style="clear:both;"></div>
<div id="copiar-1">Copiar 1</div>
<div id="copiar-2">Copiar 2</div>