PDA

View Full Version : Renumber remaining elements after deleting



bigalo
05-29-2008, 09:28 PM
Hello,

Would anyone know how I can update this code to have the remaining elements runumber after and element is deleted and added?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add/Remove child: Javascript</title>
<script>
function addEvent() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "Element Number " + num + " has been added! <a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\">Remove the element &quot;"+divIdName+"&quot;</a>";
ni.appendChild(newdiv);
}

function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>
<style type="text/css" media="screen">
.updated {
background: #FFE2AF;
color: #000;
border: 2px solid #ccc;
padding: 1em;
}
</style>
</head>

<body>

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addEvent();">Add Some Elements</a></p>
<div id="myDiv"> </div>
</body>
</html>

jscheuer1
05-30-2008, 06:06 AM
The very nature of the text displayed reveals a certain - shall we say, 'resistance' to doing what you propose. However, it is fairly easy to achieve:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Add/Remove child: Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function addEvent() {
var ni = document.getElementById('myDiv');
addEvent.v++;
var divIdName = "my"+addEvent.v+"Div";
var newdiv = document.createElement('div');
newdiv.id = divIdName;
newdiv.className = 'updated';
newdiv.appendChild(document.createTextNode("Element Number " + addEvent.v + " has been added! "));
var newlink = document.createElement('a');
newlink.onclick = function(){removeElement(this);return false;};
newlink.href='javascript:remove();';
newlink.appendChild(document.createTextNode('Remove the element "'+divIdName+'"'));
newdiv.appendChild(newlink);
ni.appendChild(newdiv);
}

function removeElement(el) {
var d = document.getElementById('myDiv');
var olddiv = el.parentNode;
d.removeChild(olddiv);
for (var ds = d.getElementsByTagName('div'), i = ds.length-1; i > -1; --i){
ds[i].firstChild.nodeValue = ds[i].firstChild.nodeValue.replace(/\d+/, i+1);
ds[i].getElementsByTagName('a')[0].firstChild.nodeValue = ds[i].getElementsByTagName('a')[0].firstChild.nodeValue.replace(/\d+/, i+1);
}
addEvent.v = ds.length;
}
addEvent.v = 0;
</script>
<style type="text/css" media="screen">
.updated {
background: #FFE2AF;
color: #000;
border: 2px solid #ccc;
padding: 1em;
}
</style>
</head>

<body>
<p><a href="javascript:add();" onclick="addEvent();return false;">Add Some Elements</a></p>
<div id="myDiv"> </div>
</body>
</html>

Notes: Converted to valid HTML 4.01 strict. Dropped the use of 'innerHTML' in favor of pure DOM 2 methods. Eliminated the need for a hidden form element which in some browsers will 'remember' the number of created division after a refresh even though these created divisions will no longer be there.

bigalo
05-30-2008, 01:58 PM
This is great John,

One question I have is, how would you manipulate the code to use HTML code instead of just plain text?

jscheuer1
05-30-2008, 02:59 PM
I'm not really sure what you mean. If you want to revert to the archaic innerHTML, that could be done. If you want to stick with DOM 2 methods, it already inserts an a and a div element, others could be inserted as well. But either way, the structure of the resulting generated code might change enough to require a slightly (or perhaps even a very) different approach when updating the text node values.

One thing I did notice later is that if you want the id's of the divisions to update as well, so that they are the same as the text describes, you would need to add (highlighted):


. . .
for (var ds = d.getElementsByTagName('div'), i = ds.length-1; i > -1; --i){
ds[i].id = 'my'+ (i+1) +'Div';
ds[i].firstChild.nodeValue = ds[i].firstChild.nodeValue.replace(/\d+/, i+1);
ds[i].getElementsByTagName('a')[0].firstChild.nodeValue = ds[i].getElementsByTagName('a')[0].firstChild.nodeValue.replace(/\d+/, i+1);
}
. . .

This would only really be required if you needed to access the remaining elements by their id after others had been removed. However, it would also lend a certain symmetry to things even if not required.

bigalo
05-30-2008, 03:17 PM
Esentially, I will be adding a variety of form elements and tables like below to be added and deleted instead of plain text. Would it be too much trouble to revert back to the innerHTML version?


Example:


<div class=\"hr\" style=\"width:100%\">&nbsp;</div>" + num + "&nbsp;&nbsp;<input name=\"delete\" type=\"button\" value=\"Delete\" class=\"btn\" onMouseOver=\"this.className='btn btnhov'\" onMouseOut=\"this.className='btn'\" onclick=\"removeElement(\'"+divIdName+"\')\" style=\"margin-top:5px;\"><table width=\"100%\" border=\"0\" cellpadding=\"1\" cellspacing=\"0\"><tr><td class=\"label\" width=\"10%\" style=\"vertical-align:middle\">CoManager:</td><td width=\"23%\" style=\"vertical-align:middle\"><select name=\"\" id=\"\"size=\"1\" class=\"normal\" style=\"width:200px;\" onfocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\"></select></td><td class=\"label\" width=\"10%\" style=\"vertical-align:middle\">Co&nbsp;Manager<br>(Internal/External):</td><td width=\"23%\" style=\"vertical-align:middle\"><select name=\"\" id=\"\"size=\"1\" class=\"normal\" style=\"width:200px;\" onfocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\"></select></td><td class=\"label\" width=\"10%\" style=\" vertical-align:middle\">&nbsp;</td><td width=\"23%\" style=\"vertical-align:middle\">&nbsp;</td></tr><tr><td class=\"label\" width=\"10%\" style=\"vertical-align:middle\">CoManager&nbsp;Legal&nbsp;Name:</td><td width=\"23%\" style=\"vertical-align:middle\"><input name=\"\" id=\"\"type=\"text\" size=\"22\" class=\"normal\" onfocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\"></td><td class=\"label\" width=\"10%\" style=\" vertical-align:middle\">&nbsp;</td><td width=\"23%\" style=\"vertical-align:middle\">&nbsp;</td><td class=\"label\" width=\"10%\" style=\" vertical-align:middle\">&nbsp;</td><td width=\"23%\" style=\"vertical-align:middle\">&nbsp;</td></tr><tr><td class=\"label\" width=\"10%\" style=\"vertical-align:middle\">CoManager&nbsp;Country:</td><td width=\"23%\" style=\"vertical-align:middle\"><input name=\"\" id=\"\"type=\"text\" size=\"22\" class=\"normal\" onfocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\"></td><td class=\"label\" width=\"10%\" style=\" vertical-align:middle\">Co&nbsp;Manager<br>Allocated %:</td><td width=\"23%\" style=\"vertical-align:middle\"><input name=\"\" id=\"\"type=\"text\" size=\"22\" class=\"normal\" onfocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\"></td><td class=\"label\" width=\"10%\" style=\" vertical-align:middle\">CoManager&nbsp;Commission<br>Amt&nbsp;USD($):</td><td width=\"23%\" style=\"vertical-align:middle\"><input name=\"\" id=\"\"type=\"text\" size=\"22\" class=\"normal\" onfocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\"></td></tr><tr><td class=\"label\" width=\"10%\" style=\"vertical-align:middle\">CoManager&nbsp;Marketing&nbsp;Name:</td><td width=\"23%\" style=\"vertical-align:middle\"><input name=\"\" id=\"\"type=\"text\" size=\"22\" class=\"normal\" onfocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\"></td><td class=\"label\" width=\"10%\" style=\" vertical-align:middle\">&nbsp;</td><td width=\"23%\" style=\"vertical-align:middle\">&nbsp;</td><td class=\"label\" width=\"10%\" style=\" vertical-align:middle\">CoManager&nbsp;Commision<br>Amt&nbsp;Native&nbsp;Ccy:</td><td width=\"23%\" style=\"vertical-align:middle\"><input name=\"\" id=\"\"type=\"text\" size=\"22\" class=\"normal\" onfocus=\"this.style.background='#F3F6F9'\" onblur=\"this.style.background='#FFF'\"></td></tr></table>

jscheuer1
05-30-2008, 03:31 PM
Not exactly too much trouble, but in fact a very bad idea if form elements are involved. That is one of the drawbacks of innerHTML, it can throw off the values in forms and/or their elements, and may make these errors in one browser, while not in another, making diagnosing and fixing the problem virtually impossible. Adding and removing elements via the DOM 2 specification really isn't as complicated as you might think. You're just not used to it.

Don't you remember all we learned here:

http://www.dynamicdrive.com/forums/showthread.php?t=32061

??

bigalo
05-30-2008, 03:42 PM
Ahh I see your point, and yes I remember that posting. I am definitely not farmiliar with the DOM 2 method...I thought since I was adding a section of form elements instead of a table row, the rules were different. Ok, How would you add that html code using the DOM 2 method?:confused:

jscheuer1
05-30-2008, 05:01 PM
Something that complex should probably be worked out in stages, but here is a utility I wrote awhile back that can help tremendously:

http://home.comcast.net/~jscheuer1/side/dom_b.htm

I fed it HTML (which was what your code should produce with a few notable exceptions - explained later)


<div>
<div class="hr" style="width:100%">\xa0</div>0\xa0\xa0<input name="delete" type="button" value="Delete" class="btn" onMouseOver="this.className='btn btnhov'" onMouseOut="this.className='btn'" onclick="removeElement('my0div')" style="margin-top:5px;"><table width="100%" border="0" cellpadding="1" cellspacing="0"><tr><td class="label" width="10%" style="vertical-align:middle">CoManager:</td><td width="23%" style="vertical-align:middle"><select name="" id=""size="1" class="normal" style="width:200px;" onfocus="this.style.background='#F3F6F9'" onblur="this.style.background='#FFF'"></select></td><td class="label" width="10%" style="vertical-align:middle">Co\xa0Manager<br>(Internal/External):</td><td width="23%" style="vertical-align:middle"><select name="" id=""size="1" class="normal" style="width:200px;" onfocus="this.style.background='#F3F6F9'" onblur="this.style.background='#FFF'"></select></td><td class="label" width="10%" style=" vertical-align:middle">\xa0</td><td width="23%" style="vertical-align:middle">\xa0</td></tr><tr><td class="label" width="10%" style="vertical-align:middle">CoManager\xa0Legal\xa0Name:</td><td width="23%" style="vertical-align:middle"><input name="" id="" type="text" size="22" class="normal" onfocus="this.style.background='#F3F6F9'" onblur="this.style.background='#FFF'"></td><td class="label" width="10%" style=" vertical-align:middle">\xa0</td><td width="23%" style="vertical-align:middle">\xa0</td><td class="label" width="10%" style=" vertical-align:middle">\xa0</td><td width="23%" style="vertical-align:middle">\xa0</td></tr><tr><td class="label" width="10%" style="vertical-align:middle">CoManager\xa0Country:</td><td width="23%" style="vertical-align:middle"><input name="" id=""type="text" size="22" class="normal" onfocus="this.style.background='#F3F6F9'" onblur="this.style.background='#FFF'"></td><td class="label" width="10%" style=" vertical-align:middle">Co\xa0Manager<br>Allocated %:</td><td width="23%" style="vertical-align:middle"><input name="" id=""type="text" size="22" class="normal" onfocus="this.style.background='#F3F6F9'" onblur="this.style.background='#FFF'"></td><td class="label" width="10%" style=" vertical-align:middle">CoManager\xa0Commission<br>Amt\xa0USD($):</td><td width="23%" style="vertical-align:middle"><input name="" id=""type="text" size="22" class="normal" onfocus="this.style.background='#F3F6F9'" onblur="this.style.background='#FFF'"></td></tr><tr><td class="label" width="10%" style="vertical-align:middle">CoManager\xa0Marketing\xa0Name:</td><td width="23%" style="vertical-align:middle"><input name="" id=""type="text" size="22" class="normal" onfocus="this.style.background='#F3F6F9'" onblur="this.style.background='#FFF'"></td><td class="label" width="10%" style=" vertical-align:middle">\xa0</td><td width="23%" style="vertical-align:middle">\xa0</td><td class="label" width="10%" style=" vertical-align:middle">CoManager\xa0Commision<br>Amt\xa0Native\xa0Ccy:</td><td width="23%" style="vertical-align:middle"><input name="" id=""type="text" size="22" class="normal" onfocus="this.style.background='#F3F6F9'" onblur="this.style.background='#FFF'"></td></tr></table>
</div>

And though it was never intended to work on such complex code, it did a reasonable job in FF and Opera at creating the DOM tree. That would give you a good jumping off point, the utility barfed in IE 7, so don't try it with IE browsers. The code generated by Opera or FF should work fine in IE though.

The exceptions are the two places where you made substitutions (you would have to go back and find those and get them to match your intentions) and it didn't pick up text nodes that were not the children of an element (this I fixed by adding a container div around the entire code before submitting it for the DOM version). Also the &nbsp; character had to be created using the javascript escaped hex code for it:

\xa0

I inserted/replaced it where required before submitting.

Once you get it all working as desired, it could probably be trimmed considerably, as the utility makes no allowance for repetitive actions that could be streamlined.

bigalo
05-30-2008, 05:16 PM
This is great! i will give it a shot and see how I make out! Thanks so much John!!!

rangana
05-31-2008, 12:33 AM
Also the &nbsp; character had to be created using the javascript escaped hex code for it:

\xa0

I inserted/replaced it where required before submitting.


I maybe wrong, but why not utilize CSS padding instead of this :rolleyes:

jscheuer1
05-31-2008, 12:48 AM
I maybe wrong, but why not utilize CSS padding instead of this :rolleyes:

"This isn't good or bad. It's just the way . . .

Six of one, half a dozen of the other. When you just need a hex A0 character, you just need it. It's a perfectly valid way to go about it in a text node. In a 'perfect world', padding (or sometimes border, or margin, etc., usually padding - other styles can play their role) is often a good or better idea. In this particular case, each hex A0 will be roughly equivalent to 1ex worth of padding on the given side of the element. But I'm just trying to get the ball rolling with DOM 2 methods here for bigalo. I don't want to throw too much at bigalo at one time.