newbie: removeChild() on table does nothing

[r_ahimsa_m]

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

<table id="property_fields" name="property_fields" border="0">

It contains set of rows with the following IDs:

var propertyRows = new Array(
"region_row", "town_row", "district_row", "address_row", "house_row", "floor_no_row", "rooms_row", "floors_row", "area_row", "year_built_row",
"ownership_row", "standard_row", "garrage_row", "parking_row", "kitchen_row", "balcony_row", "gas_row", "media_row", "equipment_row", "guard_row",
"building_type_row", "picture1_row", "picture2_row", "picture3_row", "property_remarks_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.length; r++)
{
if (visibility[document.announcement.estate_type.selectedIndex][r] == 0)
{
var theRow = document.getElementById('property_fields').rows[r + 1];
document.getElementById('property_fields').removeC hild(theRow); // 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, [e-mail] wrote:

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

<table id="property_fields" name="property_fields" border="0">

<snip>

var theRow = document.getElementById('property_fields').rows[r + 1];
document.getElementById('property_fields').removeC hild(theRow);
// 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.parentNode.removeChild(theRow);

[Thomas 'PointedEars' Lahn]

r_********@poczta.onet.pl wrote:

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

<table id="property_fields" 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_row", "address_row", "house_row", "floor_no_row", "rooms_row", "floors_row", "area_row", "year_built_row",
"ownership_row", "standard_row", "garrage_row", "parking_row", "kitchen_row", "balcony_row", "gas_row", "media_row", "equipment_row", "guard_row",
"building_type_row", "picture1_row", "picture2_row", "picture3_row", "property_remarks_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.length; r++)
{
if (visibility[document.announcement.estate_type.selectedIndex][r] == 0)
{
var theRow = document.getElementById('property_fields').rows[r + 1];
document.getElementById('property_fields').removeC hild(theRow); // 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["announcement"].elements["estate_type"];
var selIdx = sel.selectedIndex;
if (selIdx -1)
{
var table = document.getElementById('property_fields');
if (table)
{
var tbody = (table.tBodies || [null])[0];
if (tbody)
{
for (var r = propertyRows.length; r--;)
{
if (visibility[selIdx][r] == 0)
{
var theRow = tbody.rows[r + 1];
tbody.removeChild(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.javascript:

>
theRow.parentNode.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.removeChild(x);
};

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

and consequently:

function removeElementById(x) {
x = document.getElementById(x);
x.parentNode.removeChild(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 <[e-mail]:

>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.com/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." <[e-mail]:

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

function removeElement(x) {
* * * * x.parentNode.removeChild(x);

};
(...)

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

function removeElement(x) {
return x.parentNode.removeChild(x);
};

So that the calls can be nested :

document.body.appendChild(removeElement(e));

--Jorge.

[Evertjan.]

Jorge wrote on 01 jul 2008 in comp.lang.javascript:

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

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

function removeElement(x) {
* * * * x.parentNode.removeChild(x);

};
(...)

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

function removeElement(x) {
return x.parentNode.removeChild(x);
};

So that the calls can be nested :

document.body.appendChild(removeElement(e));

function removeElement(el) {
return el.parentNode.removeChild(el);
};

function transplantElement(el,targ) {
targ.appendChild(removeElement(el));
};

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

[Jorge]

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

Jorge wrote on 01 jul 2008 in comp.lang.javascript:

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

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

function removeElement(x) {
* * * * x.parentNode.removeChild(x);

};
(...)

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

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

So that the calls can be nested :

document.body.appendChild(removeElement(e));

function removeElement(el) {
* *return el.parentNode.removeChild(el);

};

function transplantElement(el,targ) {
* *targ.appendChild(removeElement(el));

};

function transplantElement(el,targ) {
** return ** targ.appendChild(removeElement(el));
};

transplantElement(e, body).className= "bodyStyle";

--Jorge.

[Evertjan.]

Jorge wrote on 01 jul 2008 in comp.lang.javascript:

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

>Jorge wrote on 01 jul 2008 in comp.lang.javascript:

On Jul 1, 4:16*pm, "Evertjan." <[e-mail]>
wrote:
(...)
Could we forget about .removeChild()
if we have the below function removeElement()?

>function removeElement(x) {
* * * * x.parentNode.removeChild(x);

>};
(...)

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

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

So that the calls can be nested :

document.body.appendChild(removeElement(e));

function removeElement(el) {
* *return el.parentNode.removeChild(el);

};

function transplantElement(el,targ) {
* *targ.appendChild(removeElement(el));

};

function transplantElement(el,targ) {
** return ** targ.appendChild(removeElement(el));
};

transplantElement(e, body).className= "bodyStyle";

;-)

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