[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Delete a div tag from page

Posted on 2009-02-14
3
Medium Priority
?
1,099 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

0
Comment
Question by:farroar
3 Comments
 
LVL 16

Accepted Solution

by:
sunithnair earned 1000 total points
ID: 23642886
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

0
 
LVL 15

Expert Comment

by:fsze88
ID: 23643422
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

0
 

Author Closing Comment

by:farroar
ID: 31546993
This answer is concise and simple. Both would have worked but this one jives with my current code better. Thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question