vanilla js remove id box

Question

I know how to do it with JQuery but I would like to remove a box with an onClick element (x) with vanilla JS. According to this I need to remove child element. As far as to this is my attempt:

function remove() {
  var element = document.getElementById("box");
  element.parentNode.removeChild(element);
}

#box {
  background-color: lightgrey;
  color: white;
  width: 20em;
  height: 20em;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}
.remover {
  font-size: 10em;
  align
}

<div id="box">
  <div id="removeBox" onclick="remove()">
  <span class="remover">x</span>
  </div>
</div>

Would you mind to help me to remove whole box with just clicking the 'x'? jsfiddle

Thank you so much

What's wrong with the code, the snippet seems to work as it is ..? — Teemu, Oct 17 '17 at 10:56
The snippet is already in Vanilla JS and works fine. What's the problem? — Karan Dhir, Oct 17 '17 at 10:57
Please when you use JSFiddle, the watermark on JS section is not just a water mark. Click on it and select `Load-Type` as `No Wrap - In body`. — Rajesh, Oct 17 '17 at 11:01
Sorry guys, yes it does work in this snippet but it doesn't work at my jsfiddle and erb (I put those snippet above for rails). Seems like i have issue with jsfiddle. Thank you @Rajesh to point me out. — akpackage, Oct 17 '17 at 11:16

DanteTheSmith · Accepted Answer · 2017-10-17T11:05:00.767

0

Don't use onclick, it's bad practice, here is why:

mixes code and markup
code written this way goes through eval
runs in the global scope while directly written functions run in user scope

Use event binding like:

document.getElementById("box").addEventListener('click', function() {
  var element = document.getElementById("box");
  element.parentNode.removeChild(element);
});

Here is an entire fiddle: fiddle

edited Oct 17 '17 at 11:05

answered Oct 17 '17 at 11:02

DanteTheSmith

2,937
1
16
31

1

Though your suggestion is correct, this is an optimisation and not the solution for what OP is asking. Also, this is a duplicate. Its a bad practice to answer a dupe. – Rajesh Oct 17 '17 at 11:04
There is no solution since his code is already working. But I see onclick all over the questions, people need to know its shitty way to do things. Events are clean, keep everything in 1 place and don't fukup the global – DanteTheSmith Oct 17 '17 at 11:07
Please mind the tone. Though I do not mind it, it is still not professional and so not suited for SO. That said, if OP's code is working and has no issues, what your answer addresses are optimizations and not solution. Also, more important reason to avoid handlers on HTML is that it makes your code fragile. Since it is visible on page, anyone can override this function in console and break your site. They can also debug and steal your code. – Rajesh Oct 17 '17 at 11:12
Guys, thanks a lot for your help. @DanteTheSmith yes the code works well. Cheers mate! – akpackage Oct 17 '17 at 11:17
@Rajesh Well, everyone can also override your JS files and break the page. Everything on the front end is kinda exposed, that is why you should never work sensitive stuff on the front and always sanitize in the back. AFAIK intention of the front is not to ensure the security of the app but to handle presentation and user interaction. – DanteTheSmith Oct 17 '17 at 11:40

vanilla js remove id box

1 Answers1