How to remove an HTML element using Javascript

Question

I am a total newbie  Can somebody tell me how to remove an HTML element using the original Javascript not jQuery   index html   lt html gt   lt head gt    lt script type  text javascript  src  myscripts js   gt   lt  script gt    lt style gt    dummy     min-width  200px    min-height  200px    max-width  200px    max-height  200px    background-color   fff000       lt  style gt   lt  head gt   lt body gt    lt div id  dummy  gt  lt  div gt     lt form gt     lt input type  submit  value  Remove DUMMY  onclick  removeDummy       gt    lt  form gt   lt  body gt      myscripts js  function removeDummy      var elem   document getElementById  dummy     elem parentNode removeChild elem       What happens when I click the submit button  is that it will disappear for a very very short time and then appear back immediately  I want to completely remove the element when I click the button

User · Answer

You should use input type  button  instead of input type  submit     lt form gt     lt input type  button  value  Remove DUMMY  onclick  removeDummy       gt    lt  form gt    Checkout Mozilla Developer Center for basic html and javascript resources

User · Answer

Change the input type to  button    As T J  and Pav said  the form is getting submitted   Your Javascript looks correct  and I commend you for trying it out the non-JQuery way

User · Answer

What s happening is that the form is getting submitted  and so the page is being refreshed  with its original content   You re handling the click event on a submit button   If you want to remove the element and not submit the form  handle the submit event on the form instead  and return false from your handler   HTML    lt form  onsubmit  return removeDummy      gt       lt input type  submit  value  Remove DUMMY   gt   lt  form gt    JavaScript   function removeDummy         var elem   document getElementById  dummy        elem parentNode removeChild elem       return false      But you don t need  or want  a form for that at all  not if its sole purpose is to remove the dummy div  Instead   HTML    lt input type  button  value  Remove DUMMY  onclick  removeDummy      gt    JavaScript   function removeDummy         var elem   document getElementById  dummy        elem parentNode removeChild elem       return false        However  that style of setting up event handlers is old-fashioned  You seem to have good instincts in that your JavaScript code is in its own file and such  The next step is to take it further and avoid using onXYZ attributes for hooking up event handlers  Instead  in your JavaScript  you can hook them up with the newer  circa year 2000  way instead   HTML    lt input id  btnRemoveDummy  type  button  value  Remove DUMMY   gt    JavaScript   function removeDummy         var elem   document getElementById  dummy        elem parentNode removeChild elem       return false    function pageInit            Hook up the  remove dummy  button     var btn   document getElementById  btnRemoveDummy        if  btn addEventListener               DOM2 standard         btn addEventListener  click   removeDummy  false             else if  btn attachEvent               IE  IE9 finally supports the above  though          btn attachEvent  onclick   removeDummy             else              Really old or non-standard browser  try DOM0         btn onclick   removeDummy               then call pageInit    from a script tag at the very end of your page body  just before the closing  lt  body gt  tag   or from within the window load event  though that happens very late in the page load cycle and so usually isn t good for hooking up event handlers  it happens after all images have finally loaded  for instance    Note that I ve had to put in some handling to deal with browser differences  You ll probably want a function for hooking up events so you don t have to repeat that logic every time  Or consider using a library like jQuery  Prototype  YUI  Closure  or any of several others to smooth over those browser differences for you  It s very important to understand the underlying stuff going on  both in terms of JavaScript fundamentals and DOM fundamentals  but libraries deal with a lot of inconsistencies  and also provide a lot of handy utilities nbsp  mdash  like a means of hooking up event handlers that deals with browser differences  Most of them also provide a way to set up a function  like pageInit  to run as soon as the DOM is ready to be manipulated  long before window load fires

User · Answer

Try running this code in your script   document getElementById  dummy   remove      And it will hopefully remove the element button

User · Answer

It reappears because your submit button reloads the page   The simplest way to prevent this behavior is to add a return false to the onclick like so    lt input type  submit  value  Remove DUMMY  onclick  removeDummy    return false     gt

User · Answer

This works  Just remove the button from the  dummy  div if you want to keep the button    x000D   x000D  function removeDummy     x000D    var elem   document getElementById  dummy    x000D    elem parentNode removeChild elem   x000D    return false  x000D    x000D   dummy   x000D    min-width  200px  x000D    min-height  200px  x000D    max-width  200px  x000D    max-height  200px  x000D    background-color   fff000  x000D    x000D   lt div id  dummy  gt  x000D     lt button onclick  removeDummy    gt Remove lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Just do this element remove     Try it here LOOK  http   jsfiddle net 4WGRP

User · Answer

That is the right code  What is probably happening is your form is submitting  and you see the new page  where the element will exist again

User · Answer

Your JavaScript is correct  Your button has type  submit  which is causing the page to refresh

User · Answer

I m still a newbie too  but here is one simple and easy way  You can use outerHTML  which is the whole tag  not just a portion   EX   lt tag id  me  gt blahblahblah lt  tag gt  s innerHTML would be blahblahblah  and outerHTML would be the whole thing   lt tag id  me  gt blahblahblah lt  tag gt    So  for the example  if you want to delete the tag  it s basically deleting its data  so if you change the outerHTML to an empty string  it s like deleting it    lt body gt       lt p id  myTag  gt This is going to get removed    lt  p gt       lt input type  button  onclick  javascript          document getElementById  myTag   outerHTML        this makes the outerHTML  the whole tag  not what is inside it        value  Remove Praragraph  gt   lt  body gt    Instead  if you want to just not display it  you can style it in JS using the visibility  opacity  and display properties   document getElementById  foo   style visibility   hidden    or document getElementById  foo   style opacity   0    or document getElementById  foo   style display   none     Note that opacity makes the element still display  just you can t see it as much  Also  you can select text  copy  paste  and do everything you could normally do  even though it s invisible Visibility fits your situation more  but it will leave a blank transparent space as big as the element it was applied to I would recommend you do display  depending on how you make your webpage  Display basically deleting the element from your view  but you can still see it in DevTools  Hope this helps

User · Answer

index html   lt input id  suby  type  submit  value  Remove DUMMY   gt    myscripts js  document addEventListener  DOMContentLoaded       Do this AFTER elements are loaded      document getElementById  suby   addEventListener  click   e   gt            document getElementById  dummy   remove

[javascript] How to remove an HTML element using Javascript?

The answer is

Examples related to javascript

Examples related to html

Tags