如何通过单击 javascript 中的按钮删除父 div 的所有子元素？

Question

所以我创建了添加表单控制页面，所以其中有一个 select 选项，您可以从中输入 select 输入字段，并且其中还有提交按钮，因此您可以添加提交按钮并将所有输入字段推送到表单 div(# form_main) 你想要的。 所以这是我项目的概述，我已经成功添加了表单控件，目前只有三个表单控件“名称”和“数字”以及“提交按钮”，我还将这些输入字段推送到表单 div(#form_main ), 但在这样做时我不希望删除按钮以 div 形式推送，为了解决我使用的问题.remove() delete_span.remove() 。 但我面临的问题是，当单击提交按钮时，只会删除 delete_span 元素的 firstChild 的删除按钮。 当用户单击一次提交按钮时，我希望删除所有删除按钮。 第二个删除按钮仅在再次单击提交按钮时被删除
帮助将不胜感激！
我正在添加我的代码片段。

 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

像这样的东西？？ 将innerHTML设置为 "" 无论你想删除什么。

 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>