How to create and delete a new js Node

Top top programmers who write these special effects. I want to learn, but I always don't know how to think or how to logic. Sometimes I am in a hurry. I am not afraid of this. Fortunately, some people have taught me how to give me some advice. This is my luck. But I can't pass it off. My biggest drawback is to escape. If I don't do anything, I will give up. If I don't, I won't, and I dare not ask. Change. This disadvantage must be changed. The following is my learning skills, clear thinking, and high efficiency .. Without talking nonsense, let's get down to the truth:
Question: add or delete a node with the btton button. Click the Add button to add a node. Click the delete button to delete the last node. The newly added element will be deleted.
Step 1: Prepare for the analysis ideas (structure behavior separation is not only html structure js script css style separation)
First, set up the html structure, define the css style, and write the BASIC script (because the js script and the html structure are separated ).
Copy codeThe Code is as follows:
<Div class = "btns">
<Input type = "button" value = "Add" id = "addBtn"> </input>
<Input type = "button" value = "Remove" id = "removeBtn"> </input>
</Div>
<Div class = "box" id = "boxcon"> </div>

Js analysis: First, The onclick events of the two buttons are encapsulated into methods to call functions for reuse.
Copy codeThe Code is as follows:
Window. onload = function (){
AddBtn. onclick = function (){}
RemoveBtn. onclick = function (){}
}

Step 2: Create a node
Copy codeThe Code is as follows:
Function createEle (){
Var newEle = document. createElement ("div"); // defines the new element node variable.
Var newBtn = document. createElement ("input"); // defines the new element node variable.
Var boxEle = document. getElementById ("boxcon ");
// Locate the element to be added to it, which is both the upper-level element. Here we use the id Identifier to find
NewEle. className = "con"; // write the attribute style assigned to the new element in css.
NewBtn. type = "button ";
NewBtn. value = "remove ";
BoxEle. appendChild (newEle); // Add the newly created node to boxcon.
}

Step 3: delete elements by writing.
Copy codeThe Code is as follows:
Function removeEle (removeObj ){
RemoveObj. parentNode. removeChild (removeObj );
// Delete an element
}

Step 4: Call a function
Copy codeThe Code is as follows:
Window. onload = function (){
AddBtn. onclick = function (){
CreateEle ();
}
RemoveBtn. onclick = function (){
Var box = document. getElementById ("boxcon ");
RemoveEle (box. lastChild );
}
}

It's almost done. Don't worry about another feature. The last feature .. (Click the new element to delete it)
Over... I still don't know much about the usage of this... In the future, you need to carefully explore...