0

Olá!

Estou iniciando os estudos em web utilizando javascript puro no curso que estou fazendo. Nessa aplicação exercício, me foi solicitado que inserisse um botão para adicionar mais campos input, conforme necessidade do usuário (trata-se de uma receita de comida e os campos ingredientes e preparação precisam de quantas linhas forem necessárias para cada receita). Até ai eu consegui fazer corretamente. A questão é que eu gostaria de fosse possível excluir as linhas. Coloquei X ao lado do input que ao ser clicado, deveria excluir a linha. O máximo que consegui foi excluir a primeira. As linhas seguintes que foram geradas não aceitam o comando. Acredito que o script carregue no inicio quando tenho apenas uma linha e não recarregue para as próximas linhas (linha de raciocício de noob rs). Poderiam me ajudar? Não posso utilizar jquery pois o curso não aborda ele.. Obrigado!

SCRIPT

const stepRemove = document.querySelector(".remove-step")


stepRemove.addEventListener('click', function() {
    stepRemove.closest('div').remove();
})

HTML

<div class="item">
    <div class="input-title">Modo de preparo</div>
        <div id="steps">
            <div class="step">
                <input 
                    type="text" 
                    name="preparation[]"
                    value="{{recipe.preparation}}"
                >
                <a class="remove-step"><span class="material-icons">highlight_off</span></a>
            </div>
        </div>
    <button type="button" class="add-step">Adicionar novo passo</button>
</div>

Desde já, obrigado pela ajuda! Patrick

3
  • Eu sei que não devia fazer tudo, mas foram 10 minutos engracados: jsbin.com/dipigov/3/edit?html,js,output 😁
    – balexandre
    Commented 18/04/2020 às 14:49
  • @balexandre compartilhe a resposta e explique o código também, com certeza vai ajudar Commented 18/04/2020 às 15:26
  • 1
    @balexandre muito obrigado pela luz. Eu aproveitei muito da sua ideia na solução do meu problema. Valeu! Commented 19/04/2020 às 16:31

1 Resposta 1

0

Oi, Patrick! Então eu pensei na seguinte solução: trocar o código antigo do javascript (porque como você disse ele realmente só é chamado uma vez) por uma função e adicionar um onCLick no link.

Além disso, você deve definir um Id único para cada link, caso contrário não irá funcionar.

function removeDiv(id) {
		const stepRemove = document.getElementById(id)
		stepRemove.closest('div').remove();
	}
<div class="step">
  <input 
    type="text" 
    name="preparation[]"
    value="{{recipe.preparation}}"
  >
  <a id='id1' onclick="removeDiv(id)" class="remove-step"><span class="material-icons">highlight_off</span></a>
</div>

Dessa forma o valor passado no onClick já é automaticamente o que é definido no Id do link. Comenta ai se não funcionar.

1
  • muito obrigado pela ajuda cara. Deu certo sim. Eu fiz o que você indicou de colocar uma id na hora de criar. Para isso usei um pouco da ideia do balexandre para isso. Mas deu super certo. Obrigado! Commented 19/04/2020 às 16:36

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 .