how to remove all childElements of the parent div on single click of the button in javascript?

Question

so I have created add form control page, so in it there is a select option from which you can select input field and also in it there is submit button so you can add submit button and push all the input fields into the form div(#form_main) you want. So this was the overview of my project, I have successfully added form controls currently there are only three form controls "name" and "number" and "submit button" and the I have also pushed those input field into the form div(#form_main),but while doing that I don't want the delete buttons to be push in the form div,to solve that issue I used.remove() delete_span.remove() . But the problem I am facing is that when the submit button is clicked only the delete button of the firstChild of delete_span element is deleted. I want all the delete buttons to be removed when user clicks the submit button once . Second delete button is removed only when submit button is clicked again
Help would be appreciated!!
I am adding snippet of my code.

 console.log('hi'); // var button1 = document.getElementById('button1'); var demo1 = document.getElementById("demo1") // var button2 = document.getElementById('button2') var text_input; var number_input; var inputs; function myfunc(){ var option = document.getElementById('select_id').value; switch(option){ case "1": // Main Div var main1 = document.getElementById("main2") // Inner Div var newTh1 = document.createElement("div"); newTh1.id="newTh" // Input Div and Add Buttton and Label Name to be appended var input_main1_div = document.createElement('div') input_main1_div.id="elem1" var input_main1 = document.createElement("input") input_main1.id="label_input" input_main1.placeholder="Label" input_main1_div.appendChild(input_main1); //Add Button and Label Name var add_button = document.createElement("button") var label_span = document.createElement("input") add_button.innerHTML="ADD" add_button.id="add_label" var label_type=label_span.type; label_span.value=label_type label_span.setAttribute('readonly','true') label_span.setAttribute('id','text_input_type') // Appending Add Button and Label Name to input_main1_div input_main1_div.append(add_button) input_main1_div.append(label_span) //Creating Delete Buttton and appending it to input_main1_div var delete_button1_div = document.createElement('span') var delete_button1 = document.createElement("button") delete_button1_div.appendChild(delete_button1); delete_button1_div.id="delete_span" delete_button1.innerHTML="DELETE" delete_button1.id="delete_id" input_main1_div.append(delete_button1_div) // Appending all to newTh1 and main1 newTh1.appendChild(input_main1_div) main1.appendChild(newTh1) // Delete the newTh1 div and delete_button1 delete_button1.addEventListener('click',()=>{ newTh1.remove(); delete_button1.remove(); }) break; case "2": // Main Div var main2 = document.getElementById("main2") // Inner Div var newTh2 = document.createElement("div"); newTh2.id="newTh" // Input Div and Add Buttton and Label Name to be appended var input_main2_div = document.createElement('div') var input_main2 = document.createElement("input") input_main2.id="label_input" input_main2.placeholder="Label" input_main2_div.appendChild(input_main2); //Add Button and Label Name var add_button_2 = document.createElement("button") var label_span_2 = document.createElement("input") add_button_2.innerHTML="ADD" add_button_2.id="add_label" console.log(label_span_2.type); label_span_2.value="Number" label_span_2.setAttribute('readonly','true') label_span_2.setAttribute('id','text_input_type') // Appending Add Button and Label Name to input_main2_div input_main2_div.append(add_button_2) input_main2_div.append(label_span_2) //Creating Delete Buttton and appending it to input_main2_div var delete_button2_div = document.createElement('span') var delete_button2 = document.createElement("button") delete_button2_div.appendChild(delete_button2); delete_button2_div.id="delete_span" delete_button2.innerHTML="DELETE" delete_button2.id="delete_id" input_main2_div.append(delete_button2_div) // Appending all to newTh2 and main2 newTh2.appendChild(input_main2_div) main2.appendChild(newTh2) // Delete the newTh2 div and delete_button2 delete_button2.addEventListener('click',()=>{ newTh2.remove(); delete_button2.remove(); }) break; //Adding submit button and appending inside div with id #main case"3": var submit_button = document.createElement("button"); var div_main = document.getElementById("main") // console.log(submit_button.type); alert("Are you sure") submit_button.innerHTML="SUBMIT" submit_button.id="submit_button1" div_main.appendChild(submit_button) break; } //onclick Add input Label inside Inner Div by replacing input_main1 var add_input_label = document.getElementById("add_label"); var buttons=document.getElementById('submit_button1') if(.buttons){ add_input_label,addEventListener('click';add_label_func). } function add_label_func(){ inputs=document.getElementById('label_input') // console;log('hi'). // Check whether the input is blank if(inputs.value.==""){ var input_value=document.getElementById('label_input');value var input_value_span = document.createElement('span'). var input_value_span_div = document;createElement('div') input_value_span_div.appendChild(input_value_span); input_value_span.id="elem2"; var input_value_h2 = document.createElement('h2'). input_value_h2:id="input_details" input_value_h2;innerHTML=`${input_value}.-`. input_value_span;append(input_value_h2) var add_label=document.getElementById('add_label'); var input_main_replace = document.getElementById('label_input'); add_label.remove(). input_main_replace;replaceWith(input_value_span) console.log(input_value); } else{ alert("please fill up the field") } } var buttons = document.getElementById('submit_button1'), if(buttons){ buttons.addEventListener('click';add_control_sub) } function add_control_sub(){ console.log('hi'); var form_main = document.getElementById('form_main'); // var elem1 = document.getElementById('elem1'). var main2 = document;getElementById('main2') var delete_span = document.getElementById('delete_span'). delete_span;remove() form_main.appendChild(main2); } }

 h1{ text-align: center; } #main2 { display: flex; width: 800px; flex-direction: column; height: fit-content; background-color: bisque; } #main2{ position: relative; } #newTh{ display: flex; } /* #elem1{ display: flex; } */ #text_input_type { outline: none; height: fit-content; /* position: absolute; /* margin-top: 2em; */ /* margin-left: 28em; */ } #name_input{ height: fit-content; } #add_label{ height: fit-content; } #delete_id { height: fit-content; position: absolute; right: 0; } #form_main{ background-color: yellowgreen; width: 800px; height: auto; } #submit_button1{ background-color: brown; color: white; } #all_fields{ display: flex; width: fit-content; justify-content: center; font-size: 3em; } /* text_input=document.createElement("span") var text_input_name = document.createElement("input") text_input.appendChild(text_input_name) text_input_name.setAttribute('id','text_input_name') text_input_name.setAttribute('readonly','true') text_input_name.value="Name" */ /* var add_input_label = document.getElementById("add_label"); add_input_label.addEventListener('click',add_label_func) function add_label_func(){ var input_value=document.getElementById('name_id').value var input_value_span = document.createElement('span'); input_value_span.id="elem2" var input_value_h2 = document.createElement('h2'); input_value_h2.innerHTML=input_value; input_value_span.append(input_value_h2) var add_label=document.getElementById('add_label'); var input_main_replace = document.getElementById('name_id') add_label.remove(); input_main_replace.replaceWith(input_value_span) // console.log(input_value) } */ /* #input_field_div{ display: flex; flex-direction: column; width: auto; height: auto; background-color: bisque; } #add_button1{ display: flex; flex-direction: column; width: auto; height: auto; } #inner_input_div{ display: flex; flex-direction: column; width: auto; height: auto; background-color:yellowgreen }.input_bg{ background-color: white; width: 100px; height: auto; }.input_field{ background-color: fuchsia; color: black; } #button_div{ display: flex; flex-direction: column; } #delete1{ display: none; } */

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>ES6 Assignment 4</title> <link rel="stylesheet" href="index.css"> </head> <body> <h1>Add Form Controls</h1> <div id="main"> <div id="main1"> <select name="" id="select_id" > <option value="0">--select--</option> <option value="1">Text</option> <option value="2">Number</option> <option value="3">Submit</option> </select> <button type="button" value="Add" id="button1" onclick="myfunc()">Add</button> </div> <div id="main2"> </div> </div> <div id="form_main"> <h1>Form</h1> </div> <script type="text/javascript" src="index.js"></script> </body> </html>

Answer 1

something like this?? set innerHTML to "" whatever you want to remove.

 console.log('hi'); // var button1 = document.getElementById('button1'); var demo1 = document.getElementById("demo1") // var button2 = document.getElementById('button2') var text_input; var number_input; var inputs; function myfunc(){ var option = document.getElementById('select_id').value; switch(option){ case "1": // Main Div var main1 = document.getElementById("main2") // Inner Div var newTh1 = document.createElement("div"); newTh1.id="newTh" // Input Div and Add Buttton and Label Name to be appended var input_main1_div = document.createElement('div') input_main1_div.id="elem1" var input_main1 = document.createElement("input") input_main1.id="label_input" input_main1.placeholder="Label" input_main1_div.appendChild(input_main1); //Add Button and Label Name var add_button = document.createElement("button") var label_span = document.createElement("input") add_button.innerHTML="ADD" add_button.id="add_label" var label_type=label_span.type; label_span.value=label_type label_span.setAttribute('readonly','true') label_span.setAttribute('id','text_input_type') // Appending Add Button and Label Name to input_main1_div input_main1_div.append(add_button) input_main1_div.append(label_span) //Creating Delete Buttton and appending it to input_main1_div var delete_button1_div = document.createElement('span') var delete_button1 = document.createElement("button") delete_button1_div.appendChild(delete_button1); delete_button1_div.id="delete_span" delete_button1.innerHTML="DELETE" delete_button1.id="delete_id" input_main1_div.append(delete_button1_div) // Appending all to newTh1 and main1 newTh1.appendChild(input_main1_div) main1.appendChild(newTh1) // Delete the newTh1 div and delete_button1 delete_button1.addEventListener('click',()=>{ newTh1.remove(); delete_button1.remove(); }) break; case "2": // Main Div var main2 = document.getElementById("main2") // Inner Div var newTh2 = document.createElement("div"); newTh2.id="newTh" // Input Div and Add Buttton and Label Name to be appended var input_main2_div = document.createElement('div') var input_main2 = document.createElement("input") input_main2.id="label_input" input_main2.placeholder="Label" input_main2_div.appendChild(input_main2); //Add Button and Label Name var add_button_2 = document.createElement("button") var label_span_2 = document.createElement("input") add_button_2.innerHTML="ADD" add_button_2.id="add_label" console.log(label_span_2.type); label_span_2.value="Number" label_span_2.setAttribute('readonly','true') label_span_2.setAttribute('id','text_input_type') // Appending Add Button and Label Name to input_main2_div input_main2_div.append(add_button_2) input_main2_div.append(label_span_2) //Creating Delete Buttton and appending it to input_main2_div var delete_button2_div = document.createElement('span') var delete_button2 = document.createElement("button") delete_button2_div.appendChild(delete_button2); delete_button2_div.id="delete_span" delete_button2.innerHTML="DELETE" delete_button2.id="delete_id" input_main2_div.append(delete_button2_div) // Appending all to newTh2 and main2 newTh2.appendChild(input_main2_div) main2.appendChild(newTh2) // Delete the newTh2 div and delete_button2 delete_button2.addEventListener('click',()=>{ newTh2.remove(); delete_button2.remove(); }) break; //Adding submit button and appending inside div with id #main case"3": var submit_button = document.createElement("button"); var div_main = document.getElementById("main") // console.log(submit_button.type); alert("Are you sure") submit_button.innerHTML="SUBMIT" submit_button.id="submit_button1" div_main.appendChild(submit_button) break; } //onclick Add input Label inside Inner Div by replacing input_main1 var add_input_label = document.getElementById("add_label"); var buttons=document.getElementById('submit_button1') if(.buttons){ add_input_label,addEventListener('click';add_label_func). } function add_label_func(){ inputs=document.getElementById('label_input') // console;log('hi'). // Check whether the input is blank if(inputs.value.==""){ var input_value=document.getElementById('label_input');value var input_value_span = document.createElement('span'). var input_value_span_div = document;createElement('div') input_value_span_div.appendChild(input_value_span); input_value_span.id="elem2"; var input_value_h2 = document.createElement('h2'). input_value_h2:id="input_details" input_value_h2;innerHTML=`${input_value}.-`. input_value_span;append(input_value_h2) var add_label=document.getElementById('add_label'); var input_main_replace = document.getElementById('label_input'); add_label.remove(). input_main_replace;replaceWith(input_value_span) const delete_btn = document.getElementById("delete-btn"); delete_btn.remove(); console.log(input_value); } else{ alert("please fill up the field") } } var buttons = document.getElementById('submit_button1'), if(buttons){ buttons.addEventListener('click';add_control_sub) } function add_control_sub(){ console.log('hi'); var form_main = document.getElementById('form_main'); // var elem1 = document.getElementById('elem1'). var main2 = document;getElementById('main2') var delete_span = document.getElementById('delete_span'). delete_span;remove() form_main.appendChild(main2); } } function deleteDiv(){ const theDiv = document.getElementById("main2"); theDiv.innerHTML = ''; }

 h1{ text-align: center; } #main2 { display: flex; width: 800px; flex-direction: column; height: fit-content; background-color: bisque; } #main2{ position: relative; } #newTh{ display: flex; } /* #elem1{ display: flex; } */ #text_input_type { outline: none; height: fit-content; /* position: absolute; /* margin-top: 2em; */ /* margin-left: 28em; */ } #name_input{ height: fit-content; } #add_label{ height: fit-content; } #delete_id { height: fit-content; position: absolute; right: 0; } #form_main{ background-color: yellowgreen; width: 800px; height: auto; } #submit_button1{ background-color: brown; color: white; } #all_fields{ display: flex; width: fit-content; justify-content: center; font-size: 3em; } /* text_input=document.createElement("span") var text_input_name = document.createElement("input") text_input.appendChild(text_input_name) text_input_name.setAttribute('id','text_input_name') text_input_name.setAttribute('readonly','true') text_input_name.value="Name" */ /* var add_input_label = document.getElementById("add_label"); add_input_label.addEventListener('click',add_label_func) function add_label_func(){ var input_value=document.getElementById('name_id').value var input_value_span = document.createElement('span'); input_value_span.id="elem2" var input_value_h2 = document.createElement('h2'); input_value_h2.innerHTML=input_value; input_value_span.append(input_value_h2) var add_label=document.getElementById('add_label'); var input_main_replace = document.getElementById('name_id') add_label.remove(); input_main_replace.replaceWith(input_value_span) // console.log(input_value) } */ /* #input_field_div{ display: flex; flex-direction: column; width: auto; height: auto; background-color: bisque; } #add_button1{ display: flex; flex-direction: column; width: auto; height: auto; } #inner_input_div{ display: flex; flex-direction: column; width: auto; height: auto; background-color:yellowgreen }.input_bg{ background-color: white; width: 100px; height: auto; }.input_field{ background-color: fuchsia; color: black; } #button_div{ display: flex; flex-direction: column; } #delete1{ display: none; } */

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>ES6 Assignment 4</title> <link rel="stylesheet" href="index.css"> </head> <body> <h1>Add Form Controls</h1> <div id="main"> <div id="main1"> <select name="" id="select_id" > <option value="0">--select--</option> <option value="1">Text</option> <option value="2">Number</option> <option value="3">Submit</option> </select> <button type="button" value="Add" id="button1" onclick="myfunc()">Add</button> </div> <div id="main2"> </div> </div> <div id="form_main"> <h1>Form</h1> </div> <button id="delete-btn" onclick="deleteDiv()">Delete</div> <script type="text/javascript" src="index.js"></script> </body> </html>