Remove child element that was dynamically created

Discussion in 'Javascript' started by BananaQuaalude, Dec 17, 2007.

  1. 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!
     
    BananaQuaalude, Dec 17, 2007
    #1
    1. Advertising

  2. BananaQuaalude

    Henry Guest

    On Dec 21, 1:58 pm, My Pet Programmer wrote:
    > Randy Webb took the time to say:
    >> My Pet Programmer said the following on 12/21/2007 12:53 AM:
    >>> In IE7, you can use:

    >
    > >> var elm = document.getElementById('elmID');

    >
    > >> if (window.event) {

    >
    >> Wouldn't you think that if(elm.removeNode) would be a better
    >> test? Just because the UA supports window.event has absolutely
    >> no bearing on whether it supports removeNode or not.


    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.

    >>>     elm.removeNode(true);
    >>>     return;

    >
    >> What do you think that return statement does in that code?

    >
    >>>   }

    >
    >>> And I haven't really worked out a simple FF method.

    >
    >> Maybe you should work out a simple - reliable - IE method first.
    >> removeChild is your friend though.

    >
    > 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.
     
    Henry, Dec 21, 2007
    #2
    1. Advertising

  3. Randy Webb said:
    > My Pet Programmer said the following on 12/21/2007 8:58 AM:
    >> Randy Webb took the time to say:
    >>> My Pet Programmer said the following on 12/21/2007 12:53 AM:
    >>>> In IE7, you can use:
    >>>>
    >>>> var elm = document.getElementById('elmID');
    >>>>
    >>>> if (window.event) {
    >>>
    >>> Wouldn't you think that if(elm.removeNode) would be a better test?
    >>> Just because the UA supports window.event has absolutely no bearing
    >>> on whether it supports removeNode or not.
    >>>
    >>>> elm.removeNode(true);
    >>>> return;
    >>>
    >>> What do you think that return statement does in that code?
    >>>
    >>>> }
    >>>>
    >>>> And I haven't really worked out a simple FF method.
    >>>
    >>> Maybe you should work out a simple - reliable - IE method first.
    >>> removeChild is your friend though.

    >>
    >> Well, it is simple, and it hasn't failed. You're right about looking
    >> for the wrong hacky-bullshit browser detect, though.

    >
    > 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.
    >
    >> If you just come on here to get your rocks off insulting people trying
    >> to help one another, you have bigger problems that the way I write my
    >> code.

    >
    > 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.
    >
    >> Prick

    >
    > 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!
     
    My Pet Programmer, Dec 23, 2007
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Johannes Koch
    Replies:
    1
    Views:
    809
    Martin Honnen
    Mar 5, 2004
  2. Jeff Rodriguez
    Replies:
    23
    Views:
    1,133
    David Schwartz
    Dec 9, 2003
  3. Replies:
    4
    Views:
    2,537
  4. msimmons
    Replies:
    0
    Views:
    498
    msimmons
    Jul 16, 2009
  5. ted benedict
    Replies:
    3
    Views:
    147
Loading...

Share This Page