如何在不使用JavaScript中的表格的情况下删除div中的行

Question

嗨，大家好，这是我的源代码，当我使用javascript按下Delete按钮时，我需要删除Div中的行，所以请给我一个解决方案。最重要的是我们不要使用Table而不是Div。给我一个解决方案。

 function Add() { var x = document.querySelectorAll(".div1"); var i; for (i = 0; i < x.length; i++) { x[i].innerHTML += "<br><br> <input type='text' name='mytext'>"; } } function del() { var y = document.querySelectorAll(".div2"); var i; for (var i = 0; i < y.length; i++) { y[i].innerHTML += "<br><br><br> <input type='button' value='delete' onclick='removeRow(this)'>"; } } function removeRow(input) { input.parentNode.removeChild(input.previousSibling); input.parentNode.removeChild(input); } 

 #add_Btn { float: left; margin: 0% 0% 0% 72%; border-radius: 25px; cursor: pointer; padding: 10px; } body { background: #00ffff; } input[type=text] { padding: 5px; margin: 5px 0px 25px 0px; border: 2px solid #ccc; border-radius: 5px; } input[type=button] { padding: 5px; border: 2px solid #ccc; border-radius: 5px; background: #00ff99; cursor: pointer; } #Wrapper { width: 80%; margin: 7% auto; } .div1 { float: left; width: 20%; background: #4dffc3; } .div2 { float: left; width: 20%; background: lightyellow; } #div3 { float: left; width: 20%; background: lightgray; } #div4 { float: left; width: 20%; background: lightblue; } #ClearFix { clear: both; } 

 <section id="Wrapper"> <button id="add_Btn" onclick="Add(); del();">Add TextBox</button><br><br> <div class="div1"> <p>This is Div one</p> </div> <div class="div1"> <p>This is Div two</p> </div> <div class="div1"> <p>This is Div threee</p> </div> <div class="div1"> <p>This is Div Four</p> </div> <span class="div2"> <p>This is Div Five</p> </span> <!--<div id="ClearFix"></div>--> </section> 

Answer 1

您必须为每行创建一个类，然后按类删除，

请参阅下面的示例如何到达

 var cpt = 0; function Add() { var x = document.querySelectorAll(".div1"); var i; for (i = 0; i < x.length; i++) { x[i].innerHTML += "<br><br> <input type='text' name='mytext' class='"+cpt+"'>"; } } function del() { var y = document.querySelectorAll(".div2"); var i; for(var i=0;i<y.length;i++) { y[i].innerHTML += "<br><br><br> <input type='button' value='delete' class='"+cpt+"' onclick='removeRow("+cpt+")'>"; } cpt++; } function removeRow(input) { var list = document.getElementsByClassName(input); for(var i = list.length - 1; 0 <= i; i--) if(list[i] && list[i].parentElement) list[i].parentElement.removeChild(list[i]); } 

  #add_Btn { float:left; margin:0% 0% 0% 72%; border-radius: 25px; cursor:pointer; padding:10px; } body { background: #00ffff; } input[type=text] { padding: 5px; margin:5px 0px 25px 0px; border: 2px solid #ccc; border-radius: 5px; } input[type=button] { padding: 5px; margin:5px 0px 25px 0px; border: 2px solid #ccc; border-radius: 5px; background:#00ff99; cursor:pointer; } #Wrapper { width:80%; margin:7% auto; } .div1 { float:left; width:20%; background:#4dffc3; } .div2 { float:left; width:20%; background:lightyellow; } #div3 { float:left; width:20%; background:lightgray; } #div4 { float: left; width:20%; background:lightblue; } #ClearFix { clear:both; } 

 <section id="Wrapper"> <button id="add_Btn" onclick="Add(cpt); del(cpt);">Add TextBox</button> <div class="div1"> <p>This is Div one</p> </div> <div class="div1"> <p>This is Div two</p> </div> <div class="div1"> <p>This is Div threee</p> </div> <div class="div1"> <p>This is Div Four</p> </div> <span class="div2"> <p>This is Div Five</p> </span> <!--<div id="ClearFix"></div>--> </section> 

Answer 2

通过@HassanSaghir更新代码。 从js中删除<br/>并修复CSS。

 var cpt = 0; function Add() { var x = document.querySelectorAll(".div1"); var i; for (i = 0; i < x.length; i++) { x[i].innerHTML += "<input type='text' name='mytext' class='" + cpt + "'>"; } } function del() { var y = document.querySelectorAll(".div2"); var i; for (var i = 0; i < y.length; i++) { y[i].innerHTML += "<input type='button' value='delete' class='" + cpt + "' onclick='removeRow(" + cpt + ")'>"; } cpt++; } function removeRow(input) { var list = document.getElementsByClassName(input); for (var i = list.length - 1; 0 <= i; i--) if (list[i] && list[i].parentElement) list[i].parentElement.removeChild(list[i]); } 

 #add_Btn { float: left; margin: 0% 0% 0% 72%; border-radius: 25px; cursor: pointer; padding: 10px; } body { background: #00ffff; } input { display: block; /* new */ } input[type=text] { padding: 5px; margin: 5px 0px 25px 0px; border: 2px solid #ccc; border-radius: 5px; } input[type=button] { padding: 5px; margin: 5px 0px 25px 0px; border: 2px solid #ccc; border-radius: 5px; background: #00ff99; cursor: pointer; } #Wrapper { width: 80%; margin: 7% auto; } .div1 { float: left; width: 20%; background: #4dffc3; } .div2 { float: left; width: 20%; background: lightyellow; } #div3 { float: left; width: 20%; background: lightgray; } #div4 { float: left; width: 20%; background: lightblue; } #ClearFix { clear: both; } 

 <section id="Wrapper"> <button id="add_Btn" onclick="Add(cpt); del(cpt);">Add TextBox</button> <div class="div1"> <p>This is Div one</p> </div> <div class="div1"> <p>This is Div two</p> </div> <div class="div1"> <p>This is Div threee</p> </div> <div class="div1"> <p>This is Div Four</p> </div> <span class="div2"> <p>This is Div Five</p> </span> <!--<div id="ClearFix"></div>--> </section>