JavaScript - Clonar Solo Una vez, Y Al Dar Click Nuevamente Eliminar clone.

   
Vista:

Clonar Solo Una vez, Y Al Dar Click Nuevamente Eliminar clone.

Publicado por Sabi (24 intervenciones) el 11/07/2017 17:39:55
necesito Ayuda, Quiero Añadir Un solo Elemento, Al Siguiente Click Eliminarlo. Aquí Os dejo El Codigo, Toca Adaptarlo Y Si Se Puede Que Simplemente Quede Un Solo Boton. Boton Añadir/Eliminar.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
#nodoRaiz {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
.nodoHijo {background-color: yellow; border-style:solid;margin: 20px; padding:15px; display:inline-block;}
#contenedor {width:405px;margin: 0 auto;}
#adelante, #atras {padding:15px; width: 130px; float: left; margin-left:20px;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var contador = 1
function crearNodoHijo(nodoPadre) {
                var nodoHijo = document.createElement("div");
                var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);
                nodoHijo.className = 'nodoHijo'; nodoHijo.appendChild(nodoTexto); nodoPadre.appendChild(nodoHijo);
                contador = contador +1;
}
function removeNodo() {
                var nodosEliminar = document.querySelectorAll('.nodoHijo');
                if (nodosEliminar.length>0) { //Si hay nodos que se puedan eliminar
                var nodoAEliminar = nodosEliminar[nodosEliminar.length-1]; //Acceso al último nodo hijo
                nodoAEliminar.parentNode.removeChild(nodoAEliminar);
                contador = contador -1;
                }
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Contenido inicial es este texto</div>
<div id="contenedor">
<div id ="atras" onclick="crearNodoHijo(document.querySelector('#nodoRaiz'))"> Añadir </div>
<div id="adelante" onclick="removeNodo()" > Eliminar </div>
</div></body></html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

Clonar Solo Una vez, Y Al Dar Click Nuevamente Eliminar clone.

Publicado por ScriptShow (471 intervenciones) el 13/07/2017 13:20:56
Saludos Sabi,

para "clonar" necesitamos un original, una referencia. Veamos una opción sencilla:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<p id="original">Texto a Clonar ...</p>
<p id="clone"></p>
<button onclick="test()">Test</button>
<script>
function test() {
var C=document.getElementById("clone");
var O=document.getElementById("original");
if (C.innerHTML=="") {C.innerHTML=O.innerHTML;}
else {C.innerHTML="";}
}
</script>
</body>
</html>

Para crear y/o eliminar un objeto, es otra cosa.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Clonar Solo Una vez, Y Al Dar Click Nuevamente Eliminar clone.

Publicado por Luis (24 intervenciones) el 18/07/2017 04:08:21
ScriptShow Te entiendo perfectamente, y te agradezco, me podrías colaborar con la parte de eliminar, es que no sé si no me estoy explicando bien, lo que quiero es que al hacer click sobre un boton amarillo, este se clone y agregue a un nuevo div, y si vuelvo a clickear sobre este mismo boton amarillo, y ya allá un clone, este clone se elimine. hay es donde es lo dificil. Agradecería por su ayuda. :) Gracias scriptSow
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad