B
BananaQuaalude
Hello,
I'm using the following code (that I found on this forum) to
dynamically add rows to an input form. I'm trying to alter it so I can
delete select rows (div elements created). I have added code that
names the DIV element being created and also adds a button to each
line item called "Remove" that I would like to remove that child
element, but I can't get the Del(button) function to work.
I commented out the original code in the Del(button) function that
deletes the last line entered. Here is the code:
<style type="text/css">
#childrenBlock div {
margin:5px; padding:5px; background:#53914d; color:#fff; }
label { font-weight:bold; width:200px; }
input { background:#48c53a; color:#fff; border:0; }
</style>
<form action="whatever.cgi" method="post">
<div id="childrenBlock">
<div>
<label for="child1">Your first child's name:</label>
<input type="text" name="allChildren" id="child1" />
</div>
</div>
<input type="button" value="Add" onclick="Add(this)" />
<input type="button" value="Del" onclick="Del(this)" />
</form>
<script type="text/javascript">
function Add(button) {
var d=document;
if(d.getElementById && d.createElement && d.body &&
d.body.appendChild && typeof d.body.innerHTML != "undefined") {
var
Block = d.getElementById("childrenBlock"),
coll = button.form.allChildren,
index = (typeof coll.length=="undefined") ? 2 : (coll.length+1);
var container = d.createElement("div");
container.id = "div" + index
container.innerHTML =
"<label for='child" + index + "'>" + index + "<\/label>"+
"<input type='text' name='allChildren' id='child" +
index + "' \/>" +
"<input type='button' name='" + index + "' value='remove'
onclick=Del(this.name)>";
Block.appendChild(container);
}
}
function Del(button) {
button = "div" + button
alert(button)
var d=document;
if(d.getElementById && d.body &&
d.body.removeChild && d.getElementsByTagName) {
var Block = d.getElementById("childrenBlock")
//divs = Block.getElementsByTagName("div");
//alert(divs)
//if(divs.length>1) {
//var divToRemove = divs[divs.length-1];
//Block.removeChild(divToRemove);
document.body.removeChild(document.getElementById(button));
//}
}
}
The error I receive:
Error: Invalid argument
on this line:
document.body.removeChild(document.getElementById(button));
Any help is greatly appreciated!
I'm using the following code (that I found on this forum) to
dynamically add rows to an input form. I'm trying to alter it so I can
delete select rows (div elements created). I have added code that
names the DIV element being created and also adds a button to each
line item called "Remove" that I would like to remove that child
element, but I can't get the Del(button) function to work.
I commented out the original code in the Del(button) function that
deletes the last line entered. Here is the code:
<style type="text/css">
#childrenBlock div {
margin:5px; padding:5px; background:#53914d; color:#fff; }
label { font-weight:bold; width:200px; }
input { background:#48c53a; color:#fff; border:0; }
</style>
<form action="whatever.cgi" method="post">
<div id="childrenBlock">
<div>
<label for="child1">Your first child's name:</label>
<input type="text" name="allChildren" id="child1" />
</div>
</div>
<input type="button" value="Add" onclick="Add(this)" />
<input type="button" value="Del" onclick="Del(this)" />
</form>
<script type="text/javascript">
function Add(button) {
var d=document;
if(d.getElementById && d.createElement && d.body &&
d.body.appendChild && typeof d.body.innerHTML != "undefined") {
var
Block = d.getElementById("childrenBlock"),
coll = button.form.allChildren,
index = (typeof coll.length=="undefined") ? 2 : (coll.length+1);
var container = d.createElement("div");
container.id = "div" + index
container.innerHTML =
"<label for='child" + index + "'>" + index + "<\/label>"+
"<input type='text' name='allChildren' id='child" +
index + "' \/>" +
"<input type='button' name='" + index + "' value='remove'
onclick=Del(this.name)>";
Block.appendChild(container);
}
}
function Del(button) {
button = "div" + button
alert(button)
var d=document;
if(d.getElementById && d.body &&
d.body.removeChild && d.getElementsByTagName) {
var Block = d.getElementById("childrenBlock")
//divs = Block.getElementsByTagName("div");
//alert(divs)
//if(divs.length>1) {
//var divToRemove = divs[divs.length-1];
//Block.removeChild(divToRemove);
document.body.removeChild(document.getElementById(button));
//}
}
}
The error I receive:
Error: Invalid argument
on this line:
document.body.removeChild(document.getElementById(button));
Any help is greatly appreciated!