Removing div on the fly with JS

pnoeric
pnoeric used Ask the Experts™
on
Hi, I have a div that's added on the fly with JS... and I need to be able to remove it on the fly as well.  Here's the code-- right now, when I click "remove" it ends up taking out that <td> (with "blah blah blah"), but I need it to bump up two levels and remove the whole enclosing <div> (or alternately, the <tr>).

I tried adding more "parentNode." to the onClick statement to see if it would climb up the levels, but that didn't work, and I don't know why :-)


<div> <!-- added on the fly -->
	<tr>
		<td style='vertical-align: top;'>here is a cell</td>
		<td style='width: 10px;'></td>
		<td>
			blah blah blah
			<a href='javascript: void(0);' onClick='
				this.parentNode.parentNode.removeChild(this.parentNode);
			'>remove</a>
		</td>
	</tr>
</div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2008
Top Expert 2008

Commented:
try:
<a href='javascript: void(0);' onClick='this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);'>remove</a>

Author

Commented:
Hmm, with that change, I'm getting an exception, "Node not found."
Expert of the Year 2008
Top Expert 2008

Commented:
Is your HTML markup correct? Did you type the correct statement? It worked for me! Save the code below as test.html and try it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div> <!-- added on the fly -->
	<tr>
		<td style='vertical-align: top;'>here is a cell</td>
		<td style='width: 10px;'></td>
		<td>
			blah blah blah
			<a href='javascript: void(0);' onClick='this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);'>remove</a>
		</td>
	</tr>
</div>
</body>
</html>

Open in new window

CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Author

Commented:
hielo, thank you for the quick reply...

I've had to rework the code slightly since there's no longer a div... now it's just the row. So the code is below. When I use the remove code you suggested, it ends up erasing the entire table :-)

I've tried adding and removing "parentNode"s in the removeChild method call, and before that, but can't seem to figure out the magic combination to remove just the table row we're in. Can you help?
<table>
	<tr>
		<td style='vertical-align: top;'> label </td>
		<td style='width: 10px;'></td>
		<td>
			page name
		</td>
	</tr>
 
	{* this next row is duplicated as we add fields *}
	<tr id='copyme' style='display: none;'>
		<td style='vertical-align: top;'> label </td>
		<td>
			<select name='field[]'> <option>test</option> </select>
			or <a href='javascript: void(0);' onMouseOver='return hs();' onClick='
					this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);
				'>remove</a>
		</td>
	</tr>
 
	<div id='writehere'></div>		
 
</table>

Open in new window

Author

Commented:
p.s. just to be clear: the <tr> with the id="copyme" is copied by some other JS code and inserted dynamically into the div "writehere" -- I think you can see what the goal is, to let the user add additional rows to the form, but also to be able to remove them on the fly, all before submitting the page.
Expert of the Year 2008
Top Expert 2008
Commented:
This worked for me! NOTE: I had to "disable" some of the CSS to I could actually "click" on remove. I also added color to the first row to make sure it "remains" after clicking remove.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table>
	<tr style="background-color:beige;">
		<td style='vertical-align: top;'> label </td>
		<td style='width: 10px;'></td>
		<td>
			page name
		</td>
	</tr>
 
	{* this next row is duplicated as we add fields *}
	<tr id='copyme' style='/*display: none;*/'>
		<td style='vertical-align: top;'> label </td>
		<td>
			<select name='field[]'> <option>test</option> </select>
			or <a href='javascript: void(0);' onMouseOver='/*return hs();*/' onClick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);'>remove</a>
		</td>
	</tr>
 
	<div id='writehere'></div>		
 
</table>
</body>
</html>

Open in new window

Author

Commented:
Aha, you dropped one of the "parentNode"s inside the removeChild() call-- that did the trick! bravo, thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial