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?

Code:

<!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:

Code:

<!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):

Code:

 . . . 
  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:

Code:

<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/s...ad.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?

**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)

HTML Code:

<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   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

Originally Posted by jscheuer1

Also the   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

Thread: Renumber remaining elements after deleting

Thread Tools

Search Thread

Renumber remaining elements after deleting

Bookmarks

Bookmarks

Posting Permissions