1

Eu estou tentando fazer com que sempre que clico no botão a imagem seja removida, eu fiz este codigo mas ele só esconde a imagem e sempre que faço reload aparece novamente, queria saber como faço para remover o conteudo ao clicar no botão ao em vez de esconder.

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>

1 Resposta 1

2

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.

1
  • Obrigado pela ajuda, e obrigado tambem por explicar isso do reload, ainda sou iniciante em javascript não sabia que era assim 30/06/2020 às 9:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .