By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,818 Members | 2,089 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,818 IT Pros & Developers. It's quick & easy.

tbody.removeChild(tbody.lastChild) sometimes fails

P: n/a
Hello,
I am lerning HTML/CSS/JavaScript. I created HTML page with
table "property_fields" containing 24 rows ('tr' elements). I want to
remove last 23 rows:

var table = document.getElementById("property_fields");
var tbody = table.tBodies[0];
for (var r = 1, len = tbody.rows.length; r < len; r++)
tbody.removeChild(tbody.lastChild);

The problem is that sometimes, I don't know when, 2-4 rows remain
after this loop (I expect only 1st row to remain). I checked
tbody.rows.length, it is equal to 24, so - for me - it means that
removeChild sometimes fails. Why?
Here is part of HTML with table - it is quite long but I include whole
table:

<table id="property_fields" border="0">
<tbody>
<tr>
<td><span class="obligatory"><label>Rodzaj
nieruchomości</label></span>:</td>
<td>
<select id="estate_type" name="estate_type"
onchange="showPropertyRows();">
<option value="" selected>(wybierz)</option>
<option value="B">budynek</option>
<option value="BB">budynek biurowy</option>
<option value="BH">budynek handlowy</option>
<option value="BI">budynek inny</option>
<option value="BM">budynek
magazynowy</option>
<option value="BP">budynek
produkcyjny</option>
<option value="BU">budynek usługowy</option>
<option value="DM">dom mieszkalny</option>
<option value="DW">dom
wielorodzinny</option>
<option value="DZ">dom zabytkowy</option>
<option value="DZB">działka
budowlana</option>
<option value="DZR">działka
rekreacyjna</option>
<option value="G">garaż</option>
<option value="GR">gospodarstwo
rolne</option>
<option value="GU">grunt</option>!
<option value="K">kawalerka</option>
<option value="L">lokal</option>
<option value="LNDZN">lokal na działalność
nieuciążliwą</option>
<option value="LNDZU">lokal na działalność
uciążliwą</option>
<option value="LUB">lokal użytkowy
biurowy</option>
<option value="LUH">lokal użytkowy
handlowy</option>
<option value="M">mieszkanie</option>
<option value="PE">pensjonat</option>
<option value="PL">plac</option>!
<option value="PO">pokój</option>
<option value="R">rezydencja</option>
<option value="I">inna</option>
</select><img src="images/asterisk.png">
</td>
</tr>
<tr>
<td><label for="property_region">Województwo:</label></td>
<td>
<select id="property_region" name="property_region"
onclick="clearAgencyRegions(); if (this.value != '')
document.announcement.agency_region[this.value - 1].checked = true;">
<option value="" selected>(wybierz)</option>
<option value="1">dolnośląskie</option>
<option
value="2">kujawsko-pomorskie</option>
<option value="3">lubelskie</option>
<option value="4">lubuskie</option>
<option value="5">łódzkie</option>
<option value="6">małopolskie</option>
<option value="7">mazowieckie</option>
<option value="8">opolskie</option>
<option value="9">podkarpackie</option>
<option value="10">podlaskie</option>
<option value="11">pomorskie</option>
<option value="12">śląskie</option>
<option value="13">świętokrzyskie</option>
<option
value="14">warmińsko-mazurskie</option>
<option value="15">wielkopolskie</option>
<option
value="16">zachodniopomorskie</option>
</select>
</td>
</tr>
<tr>
<td><label for="town">Miejscowość:</label></td>
<td><input type="text" id="town" name="town" style="width:
25ex"></td>
</tr>
<tr>
<td><label for="district">Dzielnica:</label></td>
<td><input type="text" id="district" name="district"
style="width:
25ex"></td>
</tr>
<tr>
<td><label>Adres:</label></td>
<td>Ulica: <input type="text" name="street" style="width:
30ex">&nbsp;Numer domu: <input type="text" name="house_no" style="width:
8ex">&nbsp;Numer mieszkania: <input type="text" name="flat_no"
style="width: 5ex"></td>
</tr>
<tr>
<td><label for="house">Domek:</label></td>
<td><input type="checkbox" id="house" name="house"></td>
</tr>
<tr>
<td><label for="floor_no">Które piętro:</label></td>
<td><input type="text" id="floor_no" name="floor_no"
style="width:
5ex">&nbsp;<span class="tip">(parter = 0)</span></td>
</tr>
<tr>
<td><label for="rooms">Liczba pokoi:</label></td>
<td><input type="text" id="rooms" name="rooms" style="width:
10ex"></td>
</tr>
<tr>
<td><label for="floors">Ile pięter:</label></td>
<td><input type="text" id="floors" name="floors"
style="width:
5ex">&nbsp;<span class="tip">bez parteru</span></td>
</tr>
<tr>
<td><label for="area">Powierzchnia:</label></td>
<td>
<input type="text" id="area" name="area"
style="width: 11ex">
<select name="unit">
<option value="M2">m kw.</option>
<option value="HA">hektary</option>
</select>
</td>
</tr>
<tr>
<td><label for="year_built">Rok budowy:</label></td>
<td>
<input type="text" id="year_built" name="year_built"
style="width:
5ex">&nbsp;<span class="tip">format: np.
<i><script type="text/javascript">var today = new
Date();
document.write(today.getFullYear() - 10);</script></i></span>
</td>
</tr>
<tr>
<td><label for="ownership">Forma własności:</label></td>
<td>
<select id="ownership" name="ownership">
<option value="" selected>(wybierz)</option>
<option value="H">hipoteczna</option>
<option value="K">komunalna</option>
<option value="SL">spółdzielcza
lokatorska</option>
<option value="SW">spółdzielcza
własnościowa</option>
<option value="SWK">spółdzielcza
własnościowa - księga
wieczysta</option>
<option value="I">inna</option>
</select>
</td>
</tr>
<tr>
<td><label for="standard">Standard:</label></td>
<td>
<select id="standard" name="standard">
<option value="" selected>(wybierz)</option>
<option value="">nie dotyczy</option>
<option value="BW">bardzo wysoki</option>
<option value="W">wysoki</option>
<option value="Ś">średni</option>
<option value="PW">podwyższony</option>
<option value="P">podstawowy</option>
<option value="DO">do odświeżenia</option>
<option value="DR">do remontu</option>
<option value="DW">do wykończenia</option>
</select>
</td>
</tr>
<tr>
<td><label for="garrage">Garaż:</label></td>
<td><input type="checkbox" id="garrage" name="garrage"></td>
</tr>
<tr>
<td><label for="parking">Miejsce parkingowe:</label></td>
<td><input type="checkbox" id="parking" name="parking"></td>
</tr>
<tr>
<td><label for="kitchen">Widna kuchnia:</label></td>
<td><input type="checkbox" id="kitchen" name="kitchen"></td>
</tr>
<tr>
<td><label for="balcony">Balkon:</label></td>
<td><input type="checkbox" id="balcony" name="balcony"></td>
</tr>
<tr>
<td><label for="gas">Gaz:</label></td>
<td><input type="checkbox" id="gas" name="gas"></td>
</tr>
<tr>
<td><label for="media">Uzbrojona:</label></td>
<td><input type="checkbox" id="media" name="media"></td>
</tr>
<tr>
<td><label>Wyposażenie:</label></td>
<td>
Umeblowanie:
<input type="radio" id="furnuture" name="furniture"
value="U">w
pełni</input>
<input type="radio" id="furnuture" name="furniture"
value="CZU">częściowo</input>
<input type="radio" id="furnuture" name="furniture"
value="NU">nieumeblowane</input>
<input type="radio" id="furnuture" name="furniture"
value="" select>nie
dotyczy</input<!-- źle zaznaczone -->
<br>
<input type="checkbox" id="phone"
name="phone">telefon</input>
<input type="checkbox" id="internet"
name="internet">Internet</input>
<input type="checkbox" id="washing_machine"
name="washing_machine">pralka</input>
<input type="checkbox" id="refrigerator"
name="refrigerator">lodówka</input>
</td>
</tr>
<tr>
<td><label for="guard">Ochrona:</label></td>
<td><input type="checkbox" id="guard" name="guard"></td>
</tr>
<tr>
<td><label for="building_type">Budownictwo:</label></td>
<td>
<input type="radio" id="building_type"
name="building_type"
value="N">nowe</input>
<input type="radio" id="building_type"
name="building_type"
value="S">stare</input>
<input type="radio" id="building_type"
name="building_type" value=""
checked>nie dotyczy</input>
</td>
</tr>
<tr>
<td>Zdjęcia / filmy:</td>
<td>
<select id="pictures" name="pictures">
<option value="" selected>(wybierz)</option>
</select>&nbsp;
<input type="button" id="show_picture"
name="show_picture" value="Pokaż
wybrane" onclick="ShowPicture();">&nbsp;
<input type="button" id="remove_picture"
name="remove_picture"
value="Usuń wybrane" onclick="RemovePicture();"><br>
<input type="button" id="add_picture"
name="add_picture" value="Dodaj
nowe:" onclick="AddPicture();">&nbsp;
<input type="file" id="picture" name="picture"
style="width: 45ex">
</td>
</tr>
<tr>
<td><label for="property_remarks">Uwagi:</label></td>
<td><textarea id="property_remarks" name="property_remarks"
cols="40"
rows="4"></textarea></td>
</tr>
</tbody>
</table>

Please help.
Thanks in advance.
/RAM/
Jul 5 '08 #1
Share this Question
Share on Google+
5 Replies


P: n/a
wrote on 05 jul 2008 in comp.lang.javascript:
I am lerning HTML/CSS/JavaScript. I created HTML page with
table "property_fields" containing 24 rows ('tr' elements). I want to
remove last 23 rows:

var table = document.getElementById("property_fields");
var tbody = table.tBodies[0];
for (var r = 1, len = tbody.rows.length; r < len; r++)
var r = 1; [not a comma!!!]
tbody.removeChild(tbody.lastChild);
You do not need rows and length, as you just want to remove the last 30,
just count the removeChild-s.

Try this [3 removals in stead of 30]:

========================================
<table id=t>
<tr><td>qqqqqqqqq 1</td></tr>
<tr><td>qqqqqqqqq 2</td></tr>
<tr><td>qqqqqqqqq 3</td></tr>
<tr><td>qqqqqqqqq 4</td></tr>
<tr><td>qqqqqqqqq 5</td></tr>
<tr><td>qqqqqqqqq 6</td></tr>
</table>

<script type='text/javascript'>
var table = document.getElementById("t");
var tb = table.tBodies[0];

alert(tb.lastChild.innerHTML);

for (var r = 0; r <3; r++)
tb.removeChild(tb.lastChild);

</script>
========================================
>
[long code skipped, has that to do with the Q?]

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 5 '08 #2

P: n/a
SAM
r_********@poczta.onet.pl a écrit :
Hello,
I am lerning HTML/CSS/JavaScript. I created HTML page with
table "property_fields" containing 24 rows ('tr' elements). I want to
remove last 23 rows:

var table = document.getElementById("property_fields");
var tbody = table.tBodies[0];
to remove all the rows (and probably more), usually it's used :

while( tbody.hasChildNodes && tbody.lastChild )
{
tbody.removeChild(tbody.lastChild);
}
for (var r = 1, len = tbody.rows.length; r < len; r++)
tbody.removeChild(tbody.lastChild);

The problem is that sometimes, I don't know when, 2-4 rows remain
after this loop (I expect only 1st row to remain). I checked
tbody.rows.length, it is equal to 24, so - for me - it means that
removeChild sometimes fails. Why?
because perhaps a space, a textNode, somewhere ?

so use :

for (var r = 0, len = tbody.rows.length; r < len; r++) {
tbody.removeChild(tbody.rows[0]);
}

to be sure you are removing the rows (and only them)

--
sm
Jul 5 '08 #3

P: n/a
SAM
Evertjan. a crit :
wrote on 05 jul 2008 in comp.lang.javascript:
>I am lerning HTML/CSS/JavaScript. I created HTML page with
table "property_fields" containing 24 rows ('tr' elements). I want to
remove last 23 rows:

var table = document.getElementById("property_fields");
var tbody = table.tBodies[0];
for (var r = 1, len = tbody.rows.length; r < len; r++)

var r = 1; [not a comma!!!]
Hu ? yes a coma, what do you do of var len ?
>
> tbody.removeChild(tbody.lastChild);

You do not need rows and length, as you just want to remove the last 30,
just count the removeChild-s.
J'ai rien compris.
Try this [3 removals in stead of 30]:

========================================
<table id=t>
<tr><td>qqqqqqqqq 1</td></tr>
<tr><td>qqqqqqqqq 2</td></tr>
<tr><td>qqqqqqqqq 3</td></tr>
<tr><td>qqqqqqqqq 4</td></tr>
<tr><td>qqqqqqqqq 5</td></tr>
<tr><td>qqqqqqqqq 6</td></tr>
</table>

<script type='text/javascript'>
var table = document.getElementById("t");
var tb = table.tBodies[0];

alert(tb.lastChild.innerHTML);

for (var r = 0; r <3; r++)
tb.removeChild(tb.lastChild);
perhaps more didactic with :

for (var r = 0; r <3; r++) {
alert('Node type = 'tb.lastChild.nodeType+
'\ncontent = '+tb.lastChild.innerHTML);
tb.removeChild(tb.lastChild);
}
>
</script>
========================================

--
sm
Jul 5 '08 #4

P: n/a
SAM
SAM a écrit :
>
so use :

for (var r = 0, len = tbody.rows.length; r < len; r++) {
tbody.removeChild(tbody.rows[0]);
}

to be sure you are removing the rows (and only them)
As we have to remove only the last 23 rows

for (var r = 0; r < 23; r++) {
tbody.removeChild(tbody.rows[1]);
}

As we want to keep only the first row :

while(tbody.rows[1]) tbody.removeChild(tbody.rows[1]);
--
sm
Jul 5 '08 #5

P: n/a
On Jul 6, 6:05*am, r_ahims...@poczta.onet.pl wrote:
Hello,
I am lerning HTML/CSS/JavaScript. I created HTML page with
table "property_fields" containing 24 rows ('tr' elements). I want to
remove last 23 rows:

* * * * var table = document.getElementById("property_fields");
* * * * var tbody = table.tBodies[0];
* * * * for (var r = 1, len = tbody.rows.length; r < len; r++)
* * * * * * * * tbody.removeChild(tbody.lastChild);
A tbody element may have #text node children, so just removing x
number of child nodes will not necessarily remove x rows. So instead
use the deleteRow method:

while (tbody.rows.length 1} {
tbody.deleteRow(-1);
}

Or you could do:

var i = tbody.rows.length - 1;
while (i--) {
tbody.deleteRow(-1);
}
<URL: http://www.w3.org/TR/DOM-Level-2-HTM...tml#ID-5625626 >

The HTMLTable interface has a deleteRow method too, so you may not
need to use the tbody always.
--
Rob
Jul 6 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.