Solved

delete <tr> row

Posted on 2009-04-06
3
716 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add Context Menu Item 4 44
JavaScript: Issue with onClick 5 35
How can I get this SlideToggle to behave? 6 18
how to avoid redundand ajax calls 4 0
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now