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