Clicky

I've dynamically generating the following paragraph tags code using PHP:

<p><label>Total Monthly Budget :</label><div class="dollarsign">$</div><input type="text" name="ppc_budget_total[]" id="ppc_budget_total_{$arrRecords2[Records2].ID}" value="{$arrRecords2[Records2].budget_total}" class="field_short" /><a href="???">Delete</a></p>

I generate one of these paragraph blocks for each interation in my loop, .. and I would like to figure out how to make it so that when you click on the "Delete" hyperlink that's inside those opening and closing P tags, .... that specific P tag is removed from the DOM.
 
How would I accomplish that?

Thanks in advance,
- Yvan


asked 12/12/2011 12:46

egoselfaxis's gravatar image

egoselfaxis ♦♦


3 Answers:
Here is one way, might not be the most efficient way.

This approach assumes the paragraph tag has an id attribute. That way it can be accessed directly by document.getElementById(). I used a prefix of "p_" to the ID you assign with PPC budget total.

Also, can you change the <div class="dollarsign"></div> to a span tag. I believe nested div will mess javascript code up. Putting a div inside a paragraph tag puts a block element inside an inline element. Not sure if that is correct design approach.

Does this help?

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
/**
 * Retrieve Element from DOM. This is currently the "p" tag with an ID attribute
 * set, which you would need to add if you use this approach.
 * ex: <p id="p_ppc_budget_total_500">, I added the "paragraph + underscore" (p_) 
 * prefix to the budget ID you are using. The idea is to access the paragraph tag
 * directly. This paragraph tag id is what is passed into the removeMe function.
 */
function removeMe(elem)
{
	//Access Element to Remove.
	var elemToRemove = document.getElementById(elem);
	
	//Recursively remove child elements first.
	removeChildNodes(elemToRemove);
	
	//Now remove the paragraph element.
	elemToRemove.parentNode.removeChild(elemToRemove);
	
}

/** 
 * A Helper method to remove child nodes.
 */
function removeChildNodes(element)
{
	//Test the object exists.
	if(!element) {return;}
	//remove 
	while (element.childNodes[0]) {
		element.removeChild(element.childNodes[0]);
	}
}
</script>
</head>

<body>

<p id="p_ppc_budget_total_500"><label>Total Monthly Budget 4 :</label><span class="dollarsign">$</span><input type="text" name="ppc_budget_total[]" id="ppc_budget_total_500" value="{$arrRecords2[Records2].budget_total}" class="field_short" /><a href="#" onclick="removeMe('p_ppc_budget_total_500');">Delete</a></p>

<p id="p_ppc_budget_total_501"><label>Total Monthly Budget 5 :</label><span class="dollarsign">$</span><input type="text" name="ppc_budget_total[]" id="ppc_budget_total_501" value="{$arrRecords2[Records2].budget_total}" class="field_short" /><a href="#" onclick="removeMe('p_ppc_budget_total_501');">Delete</a></p>

<p id="p_ppc_budget_total_502"><label>Total Monthly Budget 6 :</label><span class="dollarsign">$</span><input type="text" name="ppc_budget_total[]" id="ppc_budget_total_502" value="{$arrRecords2[Records2].budget_total}" class="field_short" /><a href="#" onclick="removeMe('p_ppc_budget_total_502');">Delete</a></p>

<p id="p_ppc_budget_total_503"><label>Total Monthly Budget 7 :</label><span class="dollarsign">$</span><input type="text" name="ppc_budget_total[]" id="ppc_budget_total_503" value="{$arrRecords2[Records2].budget_total}" class="field_short" /><a href="#" onclick="removeMe('p_ppc_budget_total_503');">Delete</a></p>
<p>&nbsp;</p>
</body>
</html>
link

answered

gregg_s's gravatar image

gregg_s

Works great - thank you!

- yg
link

answered 2011-12-12 at 09:30:25

egoselfaxis's gravatar image

egoselfaxis

Great! glad i could help.
link

answered 2011-12-13 at 04:05:11

gregg_s's gravatar image

gregg_s

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×104
×8
×125
×10

Asked: 12/12/2011 12:46

Seen: 266 times

Last updated: 12/12/2011 08:05