Hiding a div when link is clicked

I am trying to create a div with some text. Then there is a link below and when clicked the div should hide. This should be only be java script, i.e. no Jquery

See my try at below.. Is it possible to do it somehow inside the a element? Do I have to create a function inside a JD script?

<div id="text">   Lorem Ipsum blablal b blablaba balbla bla.
</div>
<a href="#" onclick="document.getElementById('text').hidden">Click me to hide the div</a>

solution

You could use the following:

EXAMPLE HERE

<a href="#" onclick="document.getElementById('text').style.display = 'none'">...</a>

Alternatively, if you want to use unobtrusive JavaScript, this would work if you add an id to the link.

EXAMPLE HERE

document.getElementById('link').addEventListener('click',function(){
  document.getElementById('text').style.display = 'none';
});

The above examples hide the link with display:none. If you would rather remove the element:

EXAMPLE HERE

document.getElementById('link').addEventListener('click',function(){
  document.getElementById('text').remove();
});

If you want to toggle the visibility and hide/show the element, you could use .classList.toggle().

EXAMPLE HERE

document.getElementById('link').addEventListener('click',function(e){
  document.getElementById('text').classList.toggle('hidden');
});

CSS

.hidden { display:none; }

Just take the support this method has into consideration.