A forma clássica de remover um elemento é utilizando o removeChild
a partir do elemento pai, que aplicando no seu código resulta em:
imagem.parentNode.removeChild(imagem);
Note que o acesso ao elemento pai foi feito através da propriedade parentNode
.
Exemplo:
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>
Também tem algo mais moderno mas com um pouco menos suporte, que é o remove
apenas. Este é feito diretamente sobre o elemento sem ter que aceder ao pai:
imagem.remove();
Exemplo:
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
Só para clarificar em relação ao que disse do reload. O que é feito em Javascript é aplicado no momento, após a página carregar, pelo que fazer reload volta sempre ao estado original da página.
A única forma de contornar este efeito é guardar o estado que tem no momento (após remover) em algum lado como banco de dados ou até localStorage, e reconstruir esse estado mal abre a página. De certa forma funciona como se fizesse um "salvar" na sua página, e fizesse um "abrir" quando a página carrega.
Aplicando no seu caso em concreto poderia guardar se o botão foi ou não removido, e na abertura da página removia de novo o botão caso ele já tivesse sido removido.
É importante mencionar que localStorage ou banco de dados com linguagem de backend não são iguais, mas como não sei como está a desenvolver e qual o objetivo, apenas mostrei potenciais alternativas, ainda que não exatamente iguais.