How to Delete the TextBox in a DIV using javascript. First I created the four column in a div and I created the checkbox dynamically using the Add button in a div.
What is my problem is I need to delete the appropriate textbox using the Delete button (behind the textbox).
So please give me a solution to rectify it.
function Add() {
div1.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
div2.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
div3.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
div4.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
}
function removeRow(input) {
document.getElementById('div1').removeChild(input.parentNode);
}#Wrapper {
width: 90%;
margin: 0 auto;
}
#div1 {
float: left;
width: 20%;
background: lightblue;
}
#div2 {
float: left;
width: 20%;
background: lightyellow;
}
#div3 {
float: left;
width: 20%;
background: lightgray;
}
#div4 {
float: left;
width: 20%;
background: lightblue;
}
#ClearFix {
clear: both;
}<button onclick="Add()">Add TextBox</button>
<div id="Wrapper">
<div id="div1">
<p>This is Div one</p>
</div>
<div id="div2">
<p>This is Div two</p>
</div>
<div id="div3">
<p>This is Div threee</p>
</div>
<div id="div4">
<p>This is Div Four</p>
</div>
<div id="ClearFix"></div>
</div>
