CODEWITHSUNDEEP
javascripthtml
Newbie Coder
Newbie Coder

Reputation: 10942

How to remove an HTML element using Javascript?

I am a total newbie. Can somebody tell me how to remove an HTML element using the original Javascript not jQuery.

index.html

<html>
<head>
 <script type="text/javascript" src="myscripts.js" > </script>
 <style>
 #dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
 }
 </style>
</head>
<body>
 <div id="dummy"></div>

 <form>
  <input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>
</body>

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.

Upvotes: 145

Views: 457271

Answers (11)

Sandeep Kumar M
Sandeep Kumar M

Reputation: 3851

You should use input type="button" instead of input type="submit".

<form>
  <input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
</form>

Checkout Mozilla Developer Center for basic html and javascript resources

Upvotes: 10

e-motiv
e-motiv

Reputation: 5893

index.html

<input id="suby" type="submit" value="Remove DUMMY"/>

myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})

Upvotes: 6

Sim Reaper
Sim Reaper

Reputation: 69

Try running this code in your script.

document.getElementById("dummy").remove();

And it will hopefully remove the element/button.

Upvotes: 5

HarryJamesPotter27
HarryJamesPotter27

Reputation: 181

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: <tag id='me'>blahblahblah</tag>'s innerHTML would be blahblahblah, and outerHTML would be the whole thing, <tag id='me'>blahblahblah</tag>.

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.

<body>
    <p id="myTag">This is going to get removed...</p>
    <input type="button" onclick="javascript:
        document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
    " value="Remove Praragraph">
</body>

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!

Upvotes: 1

Durtle02
Durtle02

Reputation: 29

This works. Just remove the button from the "dummy" div if you want to keep the button.

function removeDummy() {
  var elem = document.getElementById('dummy');
  elem.parentNode.removeChild(elem);
  return false;
}
#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}
<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>

Upvotes: 2

Pav
Pav

Reputation: 2318

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

Upvotes: 8

Muhammad Umer
Muhammad Umer

Reputation: 2308

Just do this element.remove();

Try it here LOOK

http://jsfiddle.net/4WGRP/

Upvotes: 40

T.J. Crowder
T.J. Crowder

Reputation: 1073968

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:

<form  onsubmit="return removeDummy(); ">
    <input type="submit" value="Remove DUMMY"/>
</form>

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:

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

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:

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

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 </body> 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 — 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.

Upvotes: 209

Newtang
Newtang

Reputation: 6544

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

Upvotes: 4

alex
alex

Reputation: 490133

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).

Upvotes: 3

mVChr
mVChr

Reputation: 50167

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:

<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />

Upvotes: 5

Related Questions