Question

Im trying to remove a Div from the DOM via an <a> tag nested within it.

I guess what I am looking for is the pure Javascript version of jQuery’s
$('div').remove()
Here’s the html set up

<div> <a href = "#" onClick = "w/e()">Click me to remove the parent div</a></div>

Thanks ahead of time. 😀

Answer 1

You could define this function

function remove(element) {
    element.parentNode.removeChild(element);
}

and use it as

<div>
    <a href="#" onClick="remove(this.parentNode)">...</a>
</div>

Reference: Node.parentNode, Node.removeChild

Further notes:

• You better use a <button> instead of a link (<a>) for this kind of behaviour. A link has a distinct semantic meaning, it has to link somewhere. You can use CSS to style the button accordingly.
• Event handlers are better added via JavaScript itself and not as an HTML attribute.