asked on

Delete a div tag from page

How do I remove a div tag completely (both <div> and </div> and all content inside)?

I have a form input box that allows you to enter in a name. Once you click 'add' it displays that name on the page with a remove link next to it inside of a DIV tag with an id that increments with each name added. I need to use that id to remove the entire tag and contents.

In the code below I am using a td tag with the id of 'names' as my container for the names added. Want to delete Frank Rizzo and the DIVs surrounding it.

Thanks!

<table>
   	<tr>
 	  	<td width="70">People:</td>
   		<td>
                     <input type="text" id="personName" />
                     &nbsp;&nbsp;<a href="#" onclick="addName(document.getElementById('personName').value);">add</a>
        </td>
   </tr>
   <tr>
   		<td colspan="2" id="names">
                <div id="1">Frank Rizzo&nbsp; <a href="#" onclick="removeName(document.getElementById('1'))">remove</a></div
   		</td>
   </tr>
</table>

Open in new window

ASKER CERTIFIED SOLUTION

sunithnair

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kin Fat SZE

this solution may be better.. it can remove <div> tag call from <a> tag which be included
no need to looking for <div> tag by id, and able to remove <div> tag even <a> tag is included by several tags (span, p)

test on ie6,ff3,opera, safari
;)

<html>
<title>Test</title>
<head>
<script>
function removeName(currDiv) {
  var container = document.getElementById("names");
  for(var i=0;i<container.childNodes.length;i++)
  {
    if(currDiv.id == container.childNodes[i].id)
    {
      container.removeChild(container.childNodes[i]);
      break;
    }
  }
}
 
function removeDiv(obj){
 
  var vParent,vParentDiv,vGrandParent;
  
  vParent = obj.parentNode;
  
  while (vParent.nodeName != 'DIV' ){
    vParent = vParent.parentNode;
  }
  vParentDiv = vParent;
  vGrandParent = vParentDiv.parentNode;
  
  for(var i=0;i<vGrandParent.childNodes.length;i++){
    if (vGrandParent.childNodes[i] == vParentDiv){
      vGrandParent.removeChild(vGrandParent.childNodes[i]);
      break;
    }
  }
}
</script>
</head>
<body>
<table>
        <tr>
                <td width="70">People:</td>
                <td>
                     <input type="text" id="personName" />
                       <a href="#" onclick="addName(document.getElementById('personName').value);">add</a>
        </td>
   </tr>
   <tr>
                <td colspan="2" id="names">
                <div id="div1">Frank Rizzo  <span><p><a href="#" onclick="removeDiv(this)">remove</a><p><span></div
                </td>
   </tr>
</table>
</body>
</html>

Open in new window

farroar

ASKER

This answer is concise and simple. Both would have worked but this one jives with my current code better. Thanks!