.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.getEle mentById("radio choice");
radio_sel.oncli ck=function(){a ddRadioOpts();}
....

....
function addRadioOpts(){


var newcell1 = document.create Element('td');


var newInput1 = document.create Element('input' );
newInput1.type = "radio";
newInput1.name = "movie";
newInput1.class Name = 'textstyle';
newInput1.value = 'swordfish';
var nameText1 = document.create TextNode("Sword fish");


var newInput2 = document.create Element('input' );
newInput2.type = "radio";
newInput2.name = "movie";
newInput2.class Name = 'textstyle';
newInput2.value = 'perfect_strang er';
var nameText2 = document.create TextNode("Perfe ct Stranger");

newcell1.append Child(newInput1 );
newcell1.append Child(nameText1 );
newcell1.append Child(newInput2 );
newcell1.append Child(nameText2 );


var nextRow = document.getEle mentById("main_ row");

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

var new_row = document.create Element('tr');
new_row.appendC hild(newcell1);

var my_label = document.create Element('label' );
my_label.classN ame = 'textstyle';
my_label.id = "newlabel";

my_label.append Child(new_row)
the_table.inser tBefore(my_labe l, nextRow);

var radio_buttons = document.getEle mentsByName("be auty");
radio_buttons.o nchange=functio n(){the_table.r emoveChild(my_l abel);}


return;
}
....

Any suggestion is appreciated...

--
Message posted via WebmasterKB.com

http://www.webmasterkb.com/Uwe/Forums.aspx/javascript/200809/1

[Martin Honnen]

Re: .removeChild Not Working...

ChuckB via WebmasterKB.com wrote:

var nextRow = document.getEle mentById("main_ row");
>
var the_table = document.getEle mentsByTagName( "tbody")[0];
>
var new_row = document.create Element('tr');
new_row.appendC hild(newcell1);
>
var my_label = document.create Element('label' );
my_label.classN ame = 'textstyle';
my_label.id = "newlabel";
>
my_label.append Child(new_row)

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

the_table.inser tBefore(my_labe l, 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.getEle mentsByName("be auty");
radio_buttons.o nchange=functio n(){the_table.r emoveChild(my_l abel);}

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

--

Martin Honnen

http://JavaScript.FAQTs.com/

[ChuckB via WebmasterKB.com]

Re: .removeChild Not Working...

Martin Honnen wrote:

>var nextRow = document.getEle mentById("main_ row");
>>

>[quoted text clipped - 8 lines]

>>
>my_label.appen dChild(new_row)

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

>the_table.inse rtBefore(my_lab el, 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="textstyl e">....</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.getEle mentsByName("be auty");
>radio_buttons. onchange=functi on(){the_table. removeChild(my_ label);}

>
>getElementsByN ame 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.getEle mentsByTagName( "input")... then

loop through and then...

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

....

any other suggestions?

--
Message posted via WebmasterKB.com

http://www.webmasterkb.com/Uwe/Forums.aspx/javascript/200809/1

[SAM]

Re: .removeChild Not Working...

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

Martin Honnen wrote:

>>var nextRow = document.getEle mentById("main_ row");
>>>

>[quoted text clipped - 8 lines]

>>my_label.appe ndChild(new_row )

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

>>the_table.ins ertBefore(my_la bel, 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 complicationnin g 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.getEle mentsByName("be auty");
>>radio_buttons .onchange=funct ion(){the_table .removeChild(my _label);}

>getElementsByN ame 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.getEle mentsByTagName( "input")... then
>
loop through and then...
>
if (whatever[i].name=="beauty" )
{
whatever[i].onchange=funct ion() {};
}
>
...
>
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]

Re: .removeChild Not Working...

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

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.""""""""@ph ysics.org or (better) via Home Page at
Web: <URL:http://www.merlyn.demo n.co.uk/>
FAQish topics, acronyms, links, etc.; Date, Delphi, JavaScript, ....|

[SAM]

Re: .removeChild Not Working...

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.c om/group/comp.lang.javas cript/browse_thread/thread/e5a11e7b8dccc7b 2/bd8f6998df792ea 8#bd8f6998df792 ea8>
whith same homework

[ChuckB via WebmasterKB.com]

Re: .removeChild Not Working...

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.c om/group/comp.lang.javas cript/browse_thread/thread/e5a11e7b8dccc7b 2/bd8f6998df792ea 8#bd8f6998df792 ea8>
>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/Forums.aspx/javascript/200809/1

[slebetman]

Re: .removeChild Not Working...

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

Martin Honnen wrote:

var radio_buttons = document.getEle mentsByName("be auty");
radio_buttons.o nchange=functio n(){the_table.r emoveChild(my_l abel);}

>

getElementsByNa me 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.getEle mentsByTagName( "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
getElementsByNa me and getElementsByTa gName return collections. So you
STILL need to loop through:

var radio_buttons = document.getEle mentsByName("be auty");
for (var i=0;i<radio_but tons.length;i++ ) {
radio_buttons[i].onchange = function(){
the_table.remov eChild(my_label );
}
}