delete <tr> row

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

Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?
 
fsze88Connect With a Mentor Commented:
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
 
Roger BaklundConnect With a Mentor Commented:
Try this:

tr = document.getElementById(rowId);
tr.parentNode.removeChild(tr);
0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.