Remove element by id

You can directly remove that element by using remove() method of DOM.

here's an example:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Having to go to the parent node first seems a bit odd to me, is there a reason JavaScript works like this?

The function name is removeChild(), and how is it possible to remove the child when there's no parent? :)

On the other hand, you do not always have to call it as you have shown. element.parentNode is only a helper to get the parent node of the given node. If you already know the parent node, you can just use it like this:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

=========================================================

To add something more:

Some answers have pointed out that instead of using parentNode.removeChild(child);, you can use elem.remove();. But as I have noticed, there is a difference between the two functions, and it's not mentioned in those answers.

If you use removeChild(), it will return a reference to the removed node.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

But if you use elem.remove();, it won't return you the reference.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

This behavior can be observed in Chrome and FF. I believe It's worth noticing :)

Hope my answer adds some value to the question and will be helpful!!

You can simply use

document.getElementById("elementID").outerHTML="";

It works in all browsers, even on Internet Explorer.

Shortest

I improve Sai Sunder answer because OP uses ID which allows to avoid getElementById:

elementId.remove();

box2.remove();          // remove BOX 2

this["box-3"].remove(); // remove BOX 3 (for Id with 'minus' character)

<div id="box1">My BOX 1</div>
<div id="box2">My BOX 2</div>
<div id="box-3">My BOX 3</div>
<div id="box4">My BOX 4</div>