How can I remove a footer element using Javascript

Question

I have HTML:

<footer class="footer">
    <div class="container-fluid wrapper">
    ...
    </div>
</footer>

How do I remove the whole footer markup using javascript (no jQuery available)?

I've tried:

var elem = document.getElementsByName("footer");
elem.remove();

...and a couple of other variations, but I can't get it to delete.

Any ideas?

Thanks, Mark

Why do you want to remove it? Would hiding it with a css modifier not be acceptable? Also you need to identify _which_ element in the returned collection you want to actually remove — SierraOscar, Mar 28 '17 at 14:44
Use removeChild via the parent, E.g. http://stackoverflow.com/questions/3387427/remove-element-by-id — Alex K., Mar 28 '17 at 14:44
Open your developer console, and you'll see the error. You can't call `.remove()` on a collection of elements. — , Mar 28 '17 at 14:47

Phoenix404 · Accepted Answer · 2017-03-28T15:00:15.380

Yes, you can do like this

function removeTagByTagName(tagName) {
  var ele = document.getElementsByTagName(tagName);
  return ele[0].parentNode.removeChild(ele[0]);
}

function removeTag(tag) {
  var ele = document.getElementsByTagName(tag);
  return ele[0].parentNode.removeChild(ele[0]);
}

var btn = document.getElementById("delet");
btn.addEventListener("click", function(){
  removeTagByTagName("footer");
});

<body>
<button id="delet">Delete Footer!</button>

  <footer class="footer" name="footer">
    <div class="container-fluid wrapper">
      blab bal babla
    </div>
  </footer>
</body>

Waqas · Answer 2 · 2017-03-28T15:22:47.253

you cannot use .remove with all browsers, since the support is not that good yet. I would recommend polyfilling the remove, so that you can use this. Use the following polyfill (taken from MDN):

// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

Now you can use .remove() with ease.

You can also use .removeChild() if you know the parent of the node you want to delete. Something like this:

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

So since your is inside the , you can treat the body as the parent and remove its child () using similar code as above snippet.

freginold · Answer 3 · 2017-03-28T15:08:23.403

2

You would need to grab that specific footer element. What you have with var elem = document.getElementsByName("footer"); grabs a collection of all elements named "footer" but if you want to do it that way, you need to add the name="footer" attribute to your footer element. The way your HTML is set up right now, you could change that line to:

var elem = document.getElementsByTagName("footer");

If you only have one footer element, then you can target that one like this:

var elem = document.getElementsByTagName("footer")[0];

Otherwise, you could assign that element an ID, or figure out which footer item in the collection it was (i.e. document.getElementsByTagName("footer")[3]).

Once you have that specific element, you can remove it like this:

elem.parentNode.removeChild(elem);

edited Mar 28 '17 at 15:08

answered Mar 28 '17 at 15:01

freginold

3,946
3
13
28

1

"grabs a collection of all footer elements" — It doesn't. It gets all elements with the attribute `name="footer"`. – Quentin Mar 28 '17 at 15:02
@Quentin you're right, thanks for pointing that out. I've corrected my answer. – freginold Mar 28 '17 at 15:08

Sagar V · Answer 4 · 2017-03-28T14:58:45.913

0

The removeChild function and querySelector can be used to fulfil your needs.

function remove(){
  var el=document.querySelector('footer.footer');
  el.parentNode.removeChild(el);
}
remove();

<footer class="footer">
    <div class="container-fluid wrapper">
    ...
    </div>
</footer>

edited Mar 28 '17 at 14:58

answered Mar 28 '17 at 14:47

Sagar V

12,158
7
41
68

Why are you asking when you haven't you commented on the answer that you down voted? – Mar 28 '17 at 14:49
I would like to know why they downvoted and in which way I can improve. @squint – Sagar V Mar 28 '17 at 14:50

How can I remove a footer element using Javascript

4 Answers4