Hola a todos, tengo este código que he hecho solo.
function appearafter() { document.getElementById("buttonappear").style.display = "block"; document.getElementById("button").style.display = "block"; document.getElementById("hinzufuegen").style.display = "none"; function myFunction() { var itm = document.getElementById("myList2").lastChild; var cln = itm.cloneNode(true); document.getElementById("myList1").appendChild(cln); } function allFunction() { myFunction(); appearafter(); } #button { display: none; } #buttonappear { display: none; } #test { width: 300px; height: 300px; background-color: red; } <!DOCTYPE html> <html> <body> <button id="hinzufuegen" onclick="allFunction()">ADD</button> <div id="myList1"> <button id="button" onclick="">DELETE</button> <div id="myList2"> <div id="test"> </div> </div> </div> <button onclick="allFunction()" id="buttonappear">ADD</button> </body> </html>Lo que quiero hacer es que el cuadrado rojo cada vez que haga clic en el botón AGREGAR será un clon y cuando haga clic en el botón ELIMINADO, el clon se eliminará. ¿Puede alguien ayudarme, por favor?
Además de faltar } como se mencionó en los comentarios, hubo un problema no tan obvio al encontrar el <div> para clonar. El lastChild era en realidad un nodo de text que contenía \n (nueva línea), después de <div> . Es mejor buscar <div> por etiqueta:
var itm = document .getElementById('myList2') .getElementsByTagName('div')[0]; Como solo hay un <div> , podemos usar el índice cero para encontrar este primero y único.
Y para la función de eliminación, puede usar un enfoque similar y obtener el último <div> y eliminarlo.
function appearafter() { document.getElementById("buttonappear").style.display = "block"; document.getElementById("button").style.display = "block"; document.getElementById("hinzufuegen").style.display = "none"; } function myFunction() { var itm = document.getElementById("myList2").getElementsByTagName("div")[0]; var cln = itm.cloneNode(true); document.getElementById("myList1").appendChild(cln); } function deleteFunction() { var list1 = document.getElementById("myList1"); var divs = Array.from(list1.getElementsByTagName("div")); // If the number of divs is 3, it means we're removing the last // cloned div, hide the delete button. if (divs.length === 3) { document.getElementById("button").style.display = "none"; } var lastDivToDelete = divs[divs.length - 1]; list1.removeChild(lastDivToDelete); } function allFunction() { myFunction(); appearafter(); } #button { display: none; } #buttonappear { display: none; } #test { /* make it smaller so it's easier to show in a snippet */ width: 30px; height: 30px; background-color: red; } <button id="hinzufuegen" onclick="allFunction()">ADD</button> <div id="myList1"> <button id="button" onclick="deleteFunction()">DELETE</button> <div id="myList2"> <div id="test"></div> </div> </div> <button onclick="allFunction()" id="buttonappear">ADD</button>