Solved

delete <tr> row

Posted on 2009-04-06
3
719 Views
Last Modified: 2012-05-06
Hi,

I have this code but I receive a type mismatch error. If I change this line:
document.getElementById(rowId).parentNode.removeChild(rowId);

to:

document.getElementById(rowId).parentNode.removeChild(row22);

it works. How can pass a variable to the removeChild?

Much thanks,
vkimura
<table id="t2">
<tr id="row11">
	<td>
		<select name="Append new row before this selected row" id="forAppendNewRow">
		<option id="row1">field 1</option>
		<option id="row2">field 2</option>
		<option id="row3">field 3</option>
		</select>
	</td>
	<td><input type="button" value="delete" onclick="deleteRow2(this.parentNode.parentNode.id);"/></td>
	<td><input type=text name="row1" id="row1-field1" size=30 maxlength=50 value="field1" /></td>
	<td><input type=text name="row1" id="row1-field2" size=30 maxlength=50 value="field2" /></td>
	<td><input type=text name="row1" id="row1-field3" size=30 maxlength=50 value="field3" /></td>
</tr>
<tr id="row22">
	<td>
		<select name="Append new row before this selected row" id="forAppendNewRow">
		<option id="row1-option">field 1</option>
		<option id="row2-option">field 2</option>
		<option id="row3-option">field 3</option>
		</select>
	</td>
	<td><input type="button" value="delete" onclick="deleteRow2(this.parentNode.parentNode.id);"/></td>
	<td><input type=text name="row2" id="row2-field1" size=30 maxlength=50 value="field1" /></td>
	<td><input type=text name="row2" id="row2-field2" size=30 maxlength=50 value="field2" /></td>
	<td><input type=text name="row2" id="row2-field3" size=30 maxlength=50 value="field3" /></td>
</tr>
</table>
	<input type="submit" value="submit" />
</form>
<script type="text/javascript">
function deleteRow2(rowId) {
	//alert(rowId);
	document.getElementById(rowId).parentNode.removeChild(rowId);
}
</script>

Open in new window

0
Comment
Question by:Victor Kimura
3 Comments
 
LVL 15

Accepted Solution

by:
fsze88 earned 375 total points
ID: 24078411
like this?
<form>
<table id="t2">
<tr id="row11">
        <td>
                <select name="Append new row before this selected row" id="forAppendNewRow">
                <option id="row1">field 2</option>
                <option id="row2">field 2</option>
                <option id="row3">field 3</option>
                </select>
        </td>
        <td><input type="button" value="delete" onclick="deleteRow2(this.parentNode.parentNode.attributes['id'].value);"/></td>
        <td><input type=text name="row1" id="row1-field1" size=30 maxlength=50 value="field1" /></td>
        <td><input type=text name="row1" id="row1-field2" size=30 maxlength=50 value="field2" /></td>
        <td><input type=text name="row1" id="row1-field3" size=30 maxlength=50 value="field3" /></td>
</tr>
<tr id="row22">
        <td>
                <select name="Append new row before this selected row" id="forAppendNewRow">
                <option id="row1-option">field 1</option>
                <option id="row2-option">field 2</option>
                <option id="row3-option">field 3</option>
                </select>
        </td>
        <td><input type="button" value="delete" onclick="deleteRow2(this.parentNode.parentNode.id);"/></td>
        <td><input type=text name="row2" id="row2-field1" size=30 maxlength=50 value="field1" /></td>
        <td><input type=text name="row2" id="row2-field2" size=30 maxlength=50 value="field2" /></td>
        <td><input type=text name="row2" id="row2-field3" size=30 maxlength=50 value="field3" /></td>
</tr>
</table>
        <input type="submit" value="submit" />
</form>
 
<script type="text/javascript">
function deleteRow2(rowId) {
//        alert(rowId);
        var i;
        var rowIndex;
        var trtag = document.getElementById(rowId);
        var tableTag = document.getElementById("t2");
//        alert(document.getElementById("t2").rows.length );
        rowIndex = 0;;
        for (i=0;i<tableTag.rows.length;i++){
//          alert(tableTag.rows[i].attributes['id'].value);
          if (tableTag.rows[i].attributes['id'].value == rowId) break;
          rowIndex++ ;
        }
//        alert('rowIndex : ' + rowIndex);
        tableTag.deleteRow(rowIndex);
 
//        document.getElementById(rowId).parentNode.removeChild(rowId);
 
}
</script>

Open in new window

0
 
LVL 39

Assisted Solution

by:Roger Baklund
Roger Baklund earned 125 total points
ID: 24078426
Try this:

tr = document.getElementById(rowId);
tr.parentNode.removeChild(tr);
0
 

Author Closing Comment

by:Victor Kimura
ID: 31567058
Thanks cxr and fsze88. Both codes work. I had to offer  fsze88 more points since he had the resolution first. Thank you both, though.

vkimura
0

Featured Post

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question