How to Remove DIV in Javascript

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Remove DIV in Javascript
Web pages use JavaScript to respond to user interaction. (Hemera Technologies/AbleStock.com/Getty Images)

Using JavaScript code you can manipulate HTML Web page elements. A JavaScript function can be designed to remove an HTML element such as a "div" from a page. JavaScript DOM programming is the main technique involved. The JavaScript DOM (Document Object Model) allows you to explore the document tree structure. HTML Web pages use tree structured content, in which elements are arranged within a nested model. JavaScript DOM functions are generally straightforward so you can attempt them even if you are a beginner.

Skill level:
Moderately Easy

Other People Are Reading

Instructions

  1. 1

    Create your Web page including a section for JavaScript code. Insert the following sample markup code into a new file and save it with the ".html" extension:

    <html>

    <head>

    <script type="text/JavaScript">

    //JavaScript code here

    </script>

    </head>

    <body>

    </body>

    </html>

    Your JavaScript DOM function will be placed within the script area in the head section, while the elements, including the one to be removed, will be included within the body.

  2. 2

    Add your JavaScript function. Between the opening and closing script tags, enter the following JavaScript function outline:

    function removeDiv() {

    //remove the div element

    }

    The content of the function will carry out the processing necessary to remove a "div" element. The function will be called within the HTML page, prompted by user interaction.

  3. 3

    Insert some HTML elements, including the "div" you want to remove. Insert this sample HTML between the opening and closing body tags:

    <div id="parentdiv">Here is a div <div id="childdiv">containing another</div></div>

    <br/><input type="button" value="remove" onclick="removeDiv()"/>

    This markup indicates a "div" with another "div" contained within it, as well as a button for the user to control the removal function. Your own page may be better designed with the function being called by another event but this really depends on the details of your project. In this case, when the button is clicked, the JavaScript function is called.

  4. 4

    Add the detail of the JavaScript function to your page. Between the opening and closing function brackets, insert the following code:

    var cDiv = document.getElementById("childdiv");

    var pDiv = document.getElementById("parentdiv");

    pDiv.removeChild(cDiv);

    This code first obtains references to the parent and child elements using their "id" values then uses these references to remove the child from the parent. The child "div" and its content will immediately disappear from the page when this function executes.

  5. 5

    Save your file and open it in a Web browser. Click the button to check that the function works. Your page should immediately remove the child "div" from view, which may mean that other elements in the page are moved as a result. If you are using the technique with other structures, remember that you need a reference to the parent element as well as the child.

Tips and warnings

  • You can call the removal function on other events such as the user rolling their mouse on or off an element.
  • JavaScript can be unpredictable when viewed in different Web browsers, so if you are using such functions it's advisable to test extensively.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.