newbie: removeChild() on table does nothing

[r_ahimsa_m]

Hello,
On index.html page I have a table with id="property_fi elds".

<table id="property_fi elds" name="property_ fields" border="0">

It contains set of rows with the following IDs:

var propertyRows = new Array(
"region_row ", "town_row", "district_r ow", "address_ro w", "house_row" , "floor_no_r ow", "rooms_row" , "floors_row ", "area_row", "year_built_row ",
"ownership_row" , "standard_r ow", "garrage_ro w", "parking_ro w", "kitchen_ro w", "balcony_ro w", "gas_row", "media_row" , "equipment_row" , "guard_row" ,
"building_type_ row", "picture1_r ow", "picture2_r ow", "picture3_r ow", "property_remar ks_row"
);

I want to remove row if it is not required - it depends on the selection of
estate_type control:

for (var r = 0; r < propertyRows.le ngth; r++)
{
if (visibility[document.announ cement.estate_t ype.selectedInd ex][r] == 0)
{
var theRow = document.getEle mentById('prope rty_fields').ro ws[r + 1];
document.getEle mentById('prope rty_fields').re moveChild(theRo w); // HERE
PROBLEM: nothing happends
}
}

(there's 2-dimensional table called visibility).

The problem is that removeChilds() does nothing, there is no visual effect.
I use FireFox in Linux.
Please help. Thanks in advance.
/RAM/

[Henry]

On Jul 1, 3:38 pm, r_ahims...@pocz ta.onet.pl wrote:

On index.html page I have a table with id="property_fi elds".

<table id="property_fi elds" name="property_ fields" border="0">

<snip>

var theRow = document.getEle mentById('prope rty_fields').ro ws[r + 1];
document.getEle mentById('prope rty_fields').re moveChild(theRo w);
// HERE PROBLEM: nothing happends

In HTML documents/DOMs TR elements are not children of TABLE elements
(though in XHTML documents/DOMs they may be) but rather the children
of (possibly implied) TBODY, THEAD or TFOOT elements, so your - theRow
- is not a child of the element on which you are calling - removeChild
- and as a result the method call is non-effective. A relatively
simple fix would be to call the - removeChild - method of the element
that was the - parentNode - of - theRow -. I.E:-

theRow.parentNo de.removeChild( theRow);

[Thomas 'PointedEars' Lahn]

r_********@pocz ta.onet.pl wrote:

On index.html page I have a table with id="property_fi elds".

<table id="property_fi elds" name="property_ fields" border="0">

`table' elements don't have a `name' attribute.

It contains set of rows with the following IDs:

var propertyRows = new Array(
"region_row ", "town_row", "district_r ow", "address_ro w", "house_row" , "floor_no_r ow", "rooms_row" , "floors_row ", "area_row", "year_built_row ",
"ownership_row" , "standard_r ow", "garrage_ro w", "parking_ro w", "kitchen_ro w", "balcony_ro w", "gas_row", "media_row" , "equipment_row" , "guard_row" ,
"building_type_ row", "picture1_r ow", "picture2_r ow", "picture3_r ow", "property_remar ks_row"
);

I want to remove row if it is not required - it depends on the selection of
estate_type control:

for (var r = 0; r < propertyRows.le ngth; r++)
{
if (visibility[document.announ cement.estate_t ype.selectedInd ex][r] == 0)
{
var theRow = document.getEle mentById('prope rty_fields').ro ws[r + 1];
document.getEle mentById('prope rty_fields').re moveChild(theRo w); // HERE
PROBLEM: nothing happends
}
}

(there's 2-dimensional table called visibility).

The problem is that removeChilds() does nothing, there is no visual effect.

Depends on how you define that. There is an exception in the Error Console.

I use FireFox in Linux.

The `tr' element is the child of a `tbody' element, not of the `table'
element, and repeated reference lookup is inefficient.

var sel = document.forms["announceme nt"].elements["estate_typ e"];
var selIdx = sel.selectedInd ex;
if (selIdx -1)
{
var table = document.getEle mentById('prope rty_fields');
if (table)
{
var tbody = (table.tBodies || [null])[0];
if (tbody)
{
for (var r = propertyRows.le ngth; r--;)
{
if (visibility[selIdx][r] == 0)
{
var theRow = tbody.rows[r + 1];
tbody.removeChi ld(theRow);
}
}
}
}
}

I presume `r + 1' is because you want the table header to stay in. If you
put that row into a `thead' element and the rest explicitly in the `tbody'
element (that is always there), you can use `r' instead.

You should use two or four spaces for indentation instead.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

[Evertjan.]

Henry wrote on 01 jul 2008 in comp.lang.javas cript:

>
theRow.parentNo de.removeChild( theRow);

Why is this spec-ed in this strange double way?

A child can only be a child of it's parent,
in this asexual DOM world?

Could we forget about .removeChild()
if we have the below function removeElement() ?

function removeElement(x ) {
x.parentNode.re moveChild(x);
};

=============== ==============

and consequently:

function removeElementBy Id(x) {
x = document.getEle mentById(x);
x.parentNode.re moveChild(x);
};

Not tested!!!
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[yukabuk]

You should use two or four spaces for indentation instead.

I would disagree, It's a chore to use code which has been written
using spaces as indentations when your trying to line up braces and
debug code. Useing tabs allows you to move things around quiker.
Using spaces does look nicer, but for jigging code around I much
prefere to use tabs.

[Henry]

On Jul 1, 3:20 pm, yukabuk <yuka...@google mail.comwrote:

>You should use two or four spaces for indentation instead.

I would disagree, It's a chore to use code which has been
written using spaces as indentations when your trying to
line up braces and debug code. Useing tabs allows you
to move things around quiker. Using spaces does look nicer,
but for jigging code around I much prefere to use tabs.

Thomas' statement is possibly insufficiently qualified. Code posted to
this group should not be formatted/indented with tabs because
newsreader software has been observed to default the number of spaces
per tab used for presentation to values at least in the range zero to
8, and may or may not offer the user the opportunity to set an
alternative). Having a tab converted to zero spaces renders it
useless, and in general 8 spaces pre tab would be too many, and tend
to quickly force line length over the suggested 72(ish) character norm
and result in code that is broken by automatic line wrapping.

Code should be presented to the group with formal indentation, pre-
line wrapped to avoid any automatic line wrapping, and executable
following a cut and paste from the newsreader. Indenting such posted
code with (small numbers of) spaces considerably helps in those
regards.

[Thomas 'PointedEars' Lahn]

yukabuk wrote:

>You should use two or four spaces for indentation instead.

I would disagree, It's a chore to use code which has been written
using spaces as indentations when your trying to line up braces and
debug code. Useing tabs allows you to move things around quiker.

Not with a decent editor. Using tabs especially provides inconsistent
display among editors and pagers.

Using spaces does look nicer, but for jigging code around I much
prefere to use tabs.

This recommendation was merely about posting code here, however with a
decent editor there is no need for tab characters in editing as well, while
still minimizing the keystrokes for formatting code.

For example, I use Eclipse's WTP/WST/JSDT editor, with which I can increase
indentation by one level, two spaces, by pressing the Tab key, and decrease
it by the same amount of spaces by pressing Shift+Tab. This also works for
multi-line selections. <http://www.eclipse.org/webtools/>

When quoting, please include, and don't remove, the attribution line.

<http://www.jibbering.c om/faq/faq_notes/clj_posts.html>
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

[Jorge]

On Jul 1, 4:16*pm, "Evertjan." <exjxw.hannivo. [e-mail] wrote:

(...)
Could we forget about .removeChild()
if we have the below function removeElement() ?

function removeElement(x ) {
* * * * x.parentNode.re moveChild(x);

};
(...)

Yes, but don't forget to return the removed element :

function removeElement(x ) {
return x.parentNode.re moveChild(x);
};

So that the calls can be nested :

document.body.a ppendChild(remo veElement(e));

--Jorge.

[Evertjan.]

Jorge wrote on 01 jul 2008 in comp.lang.javas cript:

On Jul 1, 4:16*pm, "Evertjan." <exjxw.hannivo. [e-mail] wrote:

>(...)
Could we forget about .removeChild()
if we have the below function removeElement() ?

function removeElement(x ) {
* * * * x.parentNode.re moveChild(x);

};
(...)

Yes, but don't forget to return the removed element :

function removeElement(x ) {
return x.parentNode.re moveChild(x);
};

So that the calls can be nested :

document.body.a ppendChild(remo veElement(e));

function removeElement(e l) {
return el.parentNode.r emoveChild(el);
};

function transplantEleme nt(el,targ) {
targ.appendChil d(removeElement (el));
};

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Jorge]

On Jul 1, 10:33*pm, "Evertjan." <exjxw.hannivo. [e-mail] wrote:

Jorge wrote on 01 jul 2008 in comp.lang.javas cript:

On Jul 1, 4:16*pm, "Evertjan." <exjxw.hannivo. [e-mail] wrote:

(...)
Could we forget about .removeChild()
if we have the below function removeElement() ?

function removeElement(x ) {
* * * * x.parentNode.re moveChild(x);

};
(...)

Yes, but don't forget to return the removed element :

function removeElement(x ) {
* * * * return x.parentNode.re moveChild(x);
};

So that the calls can be nested :

document.body.a ppendChild(remo veElement(e));

function removeElement(e l) {
* *return el.parentNode.r emoveChild(el);

};

function transplantEleme nt(el,targ) {
* *targ.appendChi ld(removeElemen t(el));

};

function transplantEleme nt(el,targ) {
** return ** targ.appendChil d(removeElement (el));
};

transplantEleme nt(e, body).className = "bodyStyle" ;

--Jorge.