Solved

delete <tr> row

Posted on 2009-04-06
3
722 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

728 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