.removeChild Not Working...

[ChuckB via WebmasterKB.com]

Hello.

I'm trying to remove an additional radio selection if another radio button is
selected. There's suppose to be two additional selections if one particular
button is chosen. Then if the user picks another button then this additional
selection disappears.

I've been trying the removeChild method but it doesn't seem to be working.
The code is part of a larger form code, so I'll just post the problem area...

...
var radio_sel = document.getElementById("radiochoice");
radio_sel.onclick=function(){addRadioOpts();}
....

....
function addRadioOpts(){
var newcell1 = document.createElement('td');
var newInput1 = document.createElement('input');
newInput1.type = "radio";
newInput1.name = "movie";
newInput1.className = 'textstyle';
newInput1.value = 'swordfish';
var nameText1 = document.createTextNode("Swordfish");
var newInput2 = document.createElement('input');
newInput2.type = "radio";
newInput2.name = "movie";
newInput2.className = 'textstyle';
newInput2.value = 'perfect_stranger';
var nameText2 = document.createTextNode("Perfect Stranger");

newcell1.appendChild(newInput1);
newcell1.appendChild(nameText1);
newcell1.appendChild(newInput2);
newcell1.appendChild(nameText2);
var nextRow = document.getElementById("main_row");

var the_table = document.getElementsByTagName("tbody")[0];

var new_row = document.createElement('tr');
new_row.appendChild(newcell1);

var my_label = document.createElement('label');
my_label.className = 'textstyle';
my_label.id = "newlabel";

my_label.appendChild(new_row)
the_table.insertBefore(my_label, nextRow);

var radio_buttons = document.getElementsByName("beauty");
radio_buttons.onchange=function(){the_table.remove Child(my_label);}
return;
}
....

Any suggestion is appreciated...

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forum...cript/200809/1

[Martin Honnen]

ChuckB via WebmasterKB.com wrote:

var nextRow = document.getElementById("main_row");

var the_table = document.getElementsByTagName("tbody")[0];

var new_row = document.createElement('tr');
new_row.appendChild(newcell1);

var my_label = document.createElement('label');
my_label.className = 'textstyle';
my_label.id = "newlabel";

my_label.appendChild(new_row)

Why do you try to put a row ('tr' element) into a 'label' element?

the_table.insertBefore(my_label, nextRow);

And why do you try to insert a label element into a tbody? A tbody is
supposed to contain 'tr' elements.

var radio_buttons = document.getElementsByName("beauty");
radio_buttons.onchange=function(){the_table.remove Child(my_label);}

getElementsByName returns a collection, I don't know of any collection
having an onchange handler.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[ChuckB via WebmasterKB.com]

Martin Honnen wrote:

>var nextRow = document.getElementById("main_row");

[quoted text clipped - 8 lines]

>>
my_label.appendChild(new_row)

Why do you try to put a row ('tr' element) into a 'label' element?

>the_table.insertBefore(my_label, nextRow);

I did that because without it the text for the additional buttons didn't have
the same style as the surrounding text for the form. The surrounding text for
the form had a class of ' .textstyle'. So each form element had surrounding
<labeltags. Like <label for="dish" class="textstyle">....</label>
I was having difficulty assigning this class to the <inputtag so I just
assigned it to the <labeltag and appended the <trw/ the <inputto it.

>
And why do you try to insert a label element into a tbody? A tbody is
supposed to contain 'tr' elements.

As mentioned, all of my 'tr' elements are surround by <labeltags.

>var radio_buttons = document.getElementsByName("beauty");
radio_buttons.onchange=function(){the_table.remov eChild(my_label);}

getElementsByName returns a collection, I don't know of any collection
having an onchange handler.

I was told that this way would be better than

var whatever = document.getElementsByTagName("input")...then

loop through and then...

if (whatever[i].name=="beauty")
{
whatever[i].onchange=function() {};
}

....

any other suggestions?

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forum...cript/200809/1

[SAM]

Le 9/24/08 3:43 PM, ChuckB via WebmasterKB.com a écrit :

Martin Honnen wrote:

>>var nextRow = document.getElementById("main_row");

[quoted text clipped - 8 lines]

>>my_label.appendChild(new_row)

Why do you try to put a row ('tr' element) into a 'label' element?

>>the_table.insertBefore(my_label, nextRow);

I did that because

You cannot put a TR in a LABEL
that is not correct HTML (absolutely forbidden !)

I was having difficulty assigning this class to the <inputtag so I just
assigned it to the <labeltag and appended the <trw/ the <inputto it.

why not assigning it to the TR ou the DT contining the radio buttons
or ... just style the label apended in the TD

Don't see the difficulty
I think you are complicationning your resulting html

>And why do you try to insert a label element into a tbody? A tbody is
supposed to contain 'tr' elements.

As mentioned, all of my 'tr' elements are surround by <labeltags.

Not possible ! forbidden
nothing can be inserted between </trand <tr>
nor than between </tdn' <td <tableand <tbodyand so on for all
proper tags of a table

>>var radio_buttons = document.getElementsByName("beauty");
radio_buttons.onchange=function(){the_table.remo veChild(my_label);}

getElementsByName returns a collection, I don't know of any collection
having an onchange handler.

I was told that this way would be better than

Where ?

var whatever = document.getElementsByTagName("input")...then

loop through and then...

if (whatever[i].name=="beauty")
{
whatever[i].onchange=function() {};
}

...

any other suggestions?

Try to construct your page in pure and correct HTML
(with its form with the table and labels or/and inputs in TDs)
then create your CSS
then delete (or change in comments) the TRs or TDs or LABELs you do no
more want.

Once all that is made, now and only now, you can tempt to create your JS
to toggle those objets you want to appear/disappear
(don't forget to verify With Firefox's extention "Firebug" if all is OK
on each JS's modification of the page)

--
sm

[Dr J R Stockton]

On Sep 24, 2:18*pm, "ChuckB via WebmasterKB.com" <u46201@uwewrote:

I'm trying to remove an additional radio selection if another radio button is
selected. There's suppose to be two additional selections if one particular
button is chosen. Then if the user picks another button then this additional
selection disappears.

That's an inconsistent description. The first sentence suggests that
you want to make the additional section become as if it had never been
coded. The third sentence suggests what you want it to become
invisible, without saying whether the space which it used to appear in
should be collapsed or retained with background. And you have not
said what is to happen if the particular button is subsequently
unchosen.

Clarify your thinking; you, or one of us, may then be able to provide
an appropriate solution.

Server-side code, if any, should be able to ignore data fields which
other data indicates are unwanted.

--
(c) John Stockton, near London, UK. Posting with Google.
Mail: J.R.""""""""@physics.org or (better) via Home Page at
Web: <URL:http://www.merlyn.demon.co.uk/>
FAQish topics, acronyms, links, etc.; Date, Delphi, JavaScript, ....|

[SAM]

Le 9/24/08 3:18 PM, ChuckB via WebmasterKB.com a écrit :

Hello.

I'm trying to remove an additional radio selection if another radio button is
selected. There's suppose to be two additional selections if one particular
button is chosen. Then if the user picks another button then this additional
selection disappears.

see this other post :
<http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/e5a11e7b8dccc7b2/bd8f6998df792ea8#bd8f6998df792ea8>
whith same homework

[ChuckB via WebmasterKB.com]

SAM wrote:

>Le 9/24/08 3:18 PM, ChuckB via WebmasterKB.com a écrit :

>Hello.

I'm trying to remove an additional radio selection if another radio button is
selected. There's suppose to be two additional selections if one particular
button is chosen. Then if the user picks another button then this additional
selection disappears.

see this other post :
<http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/e5a11e7b8dccc7b2/bd8f6998df792ea8#bd8f6998df792ea8>
whith same homework

Wow!...this almost the same exact question...the only difference is that the
link is dealing with checkbox options, while mine is a radio button.

I'll look at your suggestion here and comment later...Thanks..

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forum...cript/200809/1

[slebetman]

On Sep 24, 9:43 pm, "ChuckB via WebmasterKB.com" <u46201@uwewrote:

Martin Honnen wrote:

var radio_buttons = document.getElementsByName("beauty");
radio_buttons.onchange=function(){the_table.remove Child(my_label);}

getElementsByName returns a collection, I don't know of any collection
having an onchange handler.

I was told that this way would be better than

var whatever = document.getElementsByTagName("input")...then

loop through and then...

In some ways it is better because you'll probably get fewer items
searching for things named "beauty" compared to searching for all
input tags. But BOTH
getElementsByName and getElementsByTagName return collections. So you
STILL need to loop through:

var radio_buttons = document.getElementsByName("beauty");
for (var i=0;i<radio_buttons.length;i++) {
radio_buttons[i].onchange = function(){
the_table.removeChild(my_label);
}
}