Remove child element that was dynamically created

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!
 
H

Henry

Randy Webb took the time to say:

It is also the case that - window.event - will be null between events,
making this code useless on IE in any context except where executed as
a direct result of an event.
Well, it is simple,

Simple in the sense of being way more complex than it needs to be? And
being unreliable as a consequence of its needless complexity.
Consider that given a reference to any DOM Element (elm in your case)
the code for removing it from the DOM is:-

elm.parentNode.removeChild(elm);

- and that, being well supported/implemented DOM standard code, that
will work reliably (and independently of the context of the call) on
dozens of web browsers.
and it hasn't failed.

If something only 'works' with IE, and then only in certain contexts
there have to be very specific caveats to "hasn't failed".
You're right about looking for
the wrong hacky-bullshit browser detect, though.

If you just come on here to get your rocks off insulting people

You must have a very fragile ego if you see insults where I only see
questions being asked.
trying to help one another,

What is the date on the OP you were responding to? And how much help
would an unreliable "wrong hacky-bullshit" 'solution' be when a simple
and much more reliable alternative exists?

But you are forgetting the question of who is being helped by whom.
Obviously you could do with knowing a lot more about browser scripting
than you do, yet you feel insulted as a result of being pushed in the
right direction.
you have bigger problems that the way I write my code.

Prick

Now that really does look like an insult.
 
M

My Pet Programmer

Randy Webb said:
My Pet Programmer said the following on 12/21/2007 8:58 AM:

I even gave you a hint on how to find a "simple FF method". I guess you
ignored it. But, removeChild is still your friend.


Hmmm. I asked two questions, neither of which you answered, and I was
insulting you? Wow. You really should read some of the old posts where I
actually do insult people.

JFTR, I didn't insult you, I insulted that code you posted.


Thank you. I will add that to the list of names I have been called here.
Search the archives for "gnat's ass".
Sorry about all that, I'm the one who's a prick, not you. I had no call
to act like that, and I apologize.

~A!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top