Hey everyone, I'm looking for a way to delete a row within a div when a delete button is pressed using JavaScript. The catch is that I need to accomplish this without using a table, only with div elements. Can anyone provide a solution for me?
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>