JavaScript Function

Question 1

Hello everybody I have this code that I have made alone.

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>

What I want to make is that the red square whenever you are clicking on the ADD button it will be a clone and when you click on the DELETED button that the clone is deleted. Can somebody help me, please?

Question 2

Hello! You are missing a curly bracket at the end of the first function. Also, when cloning an element with an id, better assign a new id to the new element becuase ids should be unique and because getElementById would only get the first one. Other than that, it looks like your code should work for appending the element. What have you tried for removing it?

Question 3

Hello and first of all thank you for the fast answer Sir Kiebel. I want to delete the cloned square when I click on the Delete button and when I click on Add button to clone a new red square and that's in a loop. Can I post a Video to show you what I mean?

Question 4

(Luca Kiebel edited your post to make the code runnable but has not commented) I believe I understand what you mean, but better first fix at least the bracket issue since it breaks the code. Removing an element is basically the same as adding it, or even easier. Either keep a reference to it in a variable defined out of the click handler function, or retrieve a reference to it via getElemenyById (remember to give it a unique id when cloning). Then delete it by calling the remove() method.

Question 5

In addition to missing } as was mentioned in the comments, there was a not-so-obvious problem with finding the <div> to clone. The lastChild was actually a text node containing the \n (newline), after the <div>. It's better to search for <div> by tag:

var itm = document
 .getElementById('myList2')
 .getElementsByTagName('div')[0];

Since there's only one <div> we can use the zero index to find this first and only one.

And for delete function you can use a similar approach and get the last <div> and remove it.

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>

Question 6

Thank you a lot. I need to say that I am new to programming. And the final code is this:

Question 7

Please don't try to edit an answer to ask a new question. You should really just create a new question. But I've looked at your new code and there are couple of problems -- 1. the <div> you're trying to clone is empty, it should include all the form elements instead 2. the display was set to none preventing anything to show. You can check this codepen for an example that fixes these issues. Another suggestion -- you should avoid having multiple elements with the same id. If you need to style them, use class instead.

tromgy 5,9334 gold badges24 silver badges24 bronze badges · Accepted Answer · 2022-01-31 13:14:03Z

In addition to missing } as was mentioned in the comments, there was a not-so-obvious problem with finding the <div> to clone. The lastChild was actually a text node containing the \n (newline), after the <div>. It's better to search for <div> by tag:

var itm = document
 .getElementById('myList2')
 .getElementsByTagName('div')[0];

Since there's only one <div> we can use the zero index to find this first and only one.

And for delete function you can use a similar approach and get the last <div> and remove it.

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>

Thank you a lot. I need to say that I am new to programming. And the final code is this:
Please don't try to edit an answer to ask a new question. You should really just create a new question. But I've looked at your new code and there are couple of problems -- 1. the <div> you're trying to clone is empty, it should include all the form elements instead 2. the display was set to none preventing anything to show. You can check this codepen for an example that fixes these issues. Another suggestion -- you should avoid having multiple elements with the same id. If you need to style them, use class instead.

CollectivesTM on Stack Overflow

JavaScript Function

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related