removeChild only works once

Question

I have a test input form where a child select box is created depending on the value of one of the choices in the parent select box. Selecting any of the other choices in the parent select box should remove the child. It works, but only once. If the child select box is created a second time, then it is not removed by selecting one of the other choices.

Here is the code:

<html> 
<SCRIPT LANGUAGE="JavaScript">
function createtext(){
var var1 = document.getElementById('s');
var var2=var1.value;

if (var2 == "American Express")
{
var selector = document.createElement('select');
selector.id = 'gift';
selector.name = 'gift';
selector.size = '2';
myform.appendChild(selector);

var option = document.createElement('option');
option.value = '0';
option.appendChild(document.createTextNode('Gift card'));
selector.appendChild(option);

option = document.createElement('option');
option.value = '1';
option.appendChild(document.createTextNode('Fully owned card'));
selector.appendChild(option);

}
else
{
myform.removeChild(gift);

}
}
</SCRIPT>
</HEAD>
<BODY >
<form action="" method="get" name="myform">
<SELECT id = "s" name="s" size=3 onChange="createtext()" ><OPTION>Visa    Card<OPTION>Mastercard<OPTION>American Express</SELECT>
</form>
</html>

And here it is in action... http://www.crazyforstamps.com/test-form-6.htm

Side note, your HTML is invalid. Where's gift defined in `myform.removeChild(gift)`? — j08691, Sep 17 '13 at 13:25
[elements with id/name](http://www.w3.org/html/wg/drafts/html/master/Overview.html#named-access-on-the-window-object) properties will be added to the [window object](http://stackoverflow.com/questions/3434278/ie-chrome-are-dom-tree-elements-global-variables-here) — Arun P Johny, Sep 17 '13 at 13:29

Arun P Johny · Answer 1 · 2013-09-18T02:23:55.573

Try

var gel = document.getElementById('gift');
if(gel){
    myform.removeChild(gel);
}

Update:

<!DOCTYPE html>
<html>

  <head>
    <script>

        function createtext() {
            var var1 = document.getElementById('s');
            var var2 = var1.value;

            if (var2 == "American Express") {
                var selector = document.createElement('select');
                selector.id = 'gift';
                selector.name = 'gift';
                selector.size = '2';
                myform.appendChild(selector);

                var option = document.createElement('option');
                option.value = '0';
                option.appendChild(document.createTextNode('Gift card'));
                selector.appendChild(option);

                option = document.createElement('option');
                option.value = '1';
                option.appendChild(document.createTextNode('Fully owned card'));
                selector.appendChild(option);

            } else {
                <!--myform.removeChild(gift);
                var gel = document.getElementById('gift');
                if (gel) {
                    myform.removeChild(gel);
                }

            }
        }

    </script>
  </head>

  <body>

<form action="" method="get" name="myform">
    <SELECT id="s" name="s" size=3 onChange="createtext()">
        <OPTION>Visa Card</OPTION>
        <OPTION>Mastercard</OPTION>
        <OPTION>American Express</OPTION>
    </SELECT>
</form>

  </body>

</html>

Demo: Plunker

Thanks - that got it working perfectly in Firefox, and it also works in Chrome. I can't get it to work in IE though, up to version 9 which is the latest we have. In those versions of IE, I can even get the appendChild to work. I'm thinking I can probably just ignore IE8 and below, but it should at least work in IE9 and above. Does it work in your version of IE? — Paul Compton, Sep 18 '13 at 01:42
It can't be too invalid - it even works on my iPhone! So that's FF, Chrome and Safari all ok. I agree it's obviously "invalid" for IE, but the question of course is how is it invalid? — Paul Compton, Sep 18 '13 at 11:45

score 0 · Answer 2 · answered Sep 17 '13 at 13:35

0

Assuming you have defined gift somewhere which I don't see it in the question.

Removing all child elements

var gift = document.getElementById("gift");
while (gift.firstChild) {
    gift.removeChild(gift.firstChild);
}

Or another alternative is to simply assign innerHTML to an empty string

var gift = document.getElementById("gift");
gift.innerHTML = '';

answered Sep 17 '13 at 13:35

Venkata Krishna

14,926
5
42
56

A few posters have mention that gift is not defined, but I was assuming that selector.name = 'gift'; was what defined it. So where in the code and how exactly should it be defined? – Paul Compton Sep 18 '13 at 01:44
@PaulCompton - that is different.. you have defined **selector** but when you say removeChild(gift) it is a variable not a selector. – Venkata Krishna Sep 18 '13 at 04:12

score 0 · Answer 3 · answered Sep 17 '13 at 13:40

0

First of all you have to keep in mind, that each browser has it's own js compiler. Some can use properties without getting browsers dom element via JS, by just referencing their name. But in order to write all browsers supported code, you have to keep in mind JS specifications. In your current example on JSFiddle you have to always get your elements before you try to perform any actions on them.

      var myform = document.getElementById('myform');
      var gift = document.getElementById('gift');

answered Sep 17 '13 at 13:40

Johnny_D

4,592
3
33
63

Thanks. Do you mean that I should get those elements just before I attempt the removeChild? – Paul Compton Sep 18 '13 at 01:54
Yes, you have to obtain a pointer to those elements via all browser supporte func `getElementById`. Or simply add reference to jQuery, it has already implemented all cross browser funtionality. – Johnny_D Sep 18 '13 at 05:38

removeChild only works once

3 Answers3