Remove DOM elements with javascript

Question

I am trying to make that whenever I click the button the image is removed, I did this code but it only hides the image and whenever I do Load appears again, I wonder how I do to remove the content by clicking the button instead of hiding.

var btn = document.querySelector('.btn');
btn.addEventListener('click', remove);
var imagem = document.querySelector("img");

function remove() {

  imagem.classList.add('hide-me');
};

* {
  margin: 0;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  /* outline: 1px solid tomato; */
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  min-width: 100px;
}

.image {
  max-width: 200px;
  max-height: 250px;
  padding-top: 55px;
  padding-left: 40px;
}

.btn {
  border-radius: 8px;
  padding: 14px 40px;
  position: absolute;
  left: 20px;
  margin-top: 5px;
}

.hide-me {
  display: none;
}

<div>
  <button class='btn'>Botão</button>
  <img src="https://via.placeholder.com/100" class='image' alt="">
</div>

Answer 1

The classic way to remove an element is by using the removeChild from the parent element, which applying in its code results in:

imagem.parentNode.removeChild(imagem);

Note that access to the parent element was done through the property parentNode.

Example:

var btn = document.querySelector('.btn');
btn.addEventListener('click', remove);
var imagem = document.querySelector("img");

function remove() {
  imagem.parentNode.removeChild(imagem); // <--
};

* {
  margin: 0;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  min-width: 100px;
}

.image {
  max-width: 200px;
  max-height: 250px;
  padding-top: 55px;
  padding-left: 40px;
}

.btn {
  border-radius: 8px;
  padding: 14px 40px;
  position: absolute;
  left: 20px;
  margin-top: 5px;
}

<div>
  <button class='btn'>Botão</button>
  <img src="https://via.placeholder.com/100" class='image' alt="">
</div>

It also has something more modern but with a little less support, which is the remove only. This is done directly over the element without having to access the parent:

imagem.remove();

Example:

var btn = document.querySelector('.btn');
btn.addEventListener('click', remove);
var imagem = document.querySelector("img");

function remove() {
  imagem.remove(); // <--
};

* {
  margin: 0;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  min-width: 100px;
}

.image {
  max-width: 200px;
  max-height: 250px;
  padding-top: 55px;
  padding-left: 40px;
}

.btn {
  border-radius: 8px;
  padding: 14px 40px;
  position: absolute;
  left: 20px;
  margin-top: 5px;
}

<div>
  <button class='btn'>Botão</button>
  <img src="https://via.placeholder.com/100" class='image' alt="">
</div>

Reload

Just to clarify about what you said about Reload. What is done in Javascript is applied at the moment, after the page loads, so the Reload always goes back to the original state of the page.

The only way to circumvent this effect is to save the state you have at the moment (after removing) somewhere as a database or even localStorage, and rebuild that state as soon as you open the page. In a way it works as if you do a "save" on your page, and make an "open" when the page loads.

Applying in your particular case you could save whether or not the button was removed, and at the top of the page remove the button again if it had already been removed.

It is important to mention that localStorage or database with backend language are not equal, but as I do not know how it is developing and what the goal, I just showed potential alternatives, although not exactly equal.