Link to home
Start Free TrialLog in
Avatar of pnoeric
pnoericFlag for United States of America

asked on

Removing div on the fly with JS

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

Avatar of hielo
hielo
Flag of Wallis and Futuna image

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

ASKER

Hmm, with that change, I'm getting an exception, "Node not found."
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

Avatar of pnoeric

ASKER

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

Avatar of pnoeric

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of pnoeric

ASKER

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