We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

Delete a div tag from page

farroar
farroar asked
on
Medium Priority
1,118 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Yes you can do it like this
<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;
    }
  }
}
</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="1">Frank Rizzo  <a href="#" onclick="removeName(document.getElementById('1'))">remove</a></div
                </td>
   </tr>
</table>
</body>
</html>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
CERTIFIED EXPERT

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

Author

Commented:
This answer is concise and simple. Both would have worked but this one jives with my current code better. Thanks!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.