Remove self element onclick

Question

I have an element that is added using javascript to my HTML document. I am trying to remove it when I click on that same element. I do not know the id of the element yet, I have just included a sample id for now.

I have already tried looking at this answer here (Creating an element that can remove it self?) and tried using the method provided here (Javascript: How to make a Control send itself in a method) as well to reference the element but have had no luck.

Here is what I have so far.

function remove() {
  var element = this.id;
  //I have also tried using document.getElementByID(this.id)
  element.remove();
  //I have also tried using element.parentNode.removeChild(element); to remove the element.
}

<div id="i" onclick="remove(this)">Sample text</div>

I am not sure what I am doing wrong but this is the error I keep getting.

"Uncaught TypeError: Cannot read property 'remove' of undefined"

Answer 1

"Uncaught TypeError: Cannot read property 'remove' of undefined"

This means the object you're trying to remove doesn't exist what makes complete sense because this.id isn't defined anywhere.

To correctly reference a html element using javascript you need to use the document.getElementById() function. The id of the html element you're trying to remove is i - so try document.getElementById("i");

function remove() {
  var element = document.getElementById("i");
  element.remove();
}

<div id="i" onclick="remove(this)">Sample text</div>

Another - more elegant way - is to pass a reference to the object you clicked on with the callback function. This is simply done by adding event as a parameter. Inside the callback you can reference the element using e.target.

function remove(e) {
  var element = e.target;
  element.remove();
}

<div id="i" onclick="remove(event)">Sample text</div>

Answer 2

You have to pass this through the function call in html onclick so it could refer to the element then you have to use it as parameter in the function definition, otherwise, if you use this in the function definition, it will just refer to the window object.

This will work fine

function remove(el) {
  var element = el;
  element.remove();
}

<div id="i" onclick="remove(this)">Sample text</div>

Answer 3

your remove function should be like this

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

your are passing a this in your html, which is the html tag itself, however, when you using this in your js function, that this is the function itself, so you will get error by trying to use the js function's id as element id

Answer 4

Minimalist solution:

<div onclick="this.remove()">Sample text</div>