How to delete items from HTML using Javascript

Asked

Viewed 96 times

-1

I’m doing an exercise where I have to create a list of items using HTML and a function to delete items from the list. The function must use the Submit input to delete the entire HTML item without deleting another item from the list. I created the list and the function, but it’s not working. Can you help me? Thank you.

<script>
  const produto = document.querySelector(".produto");

  //Função para excluir um item da lista
  const excluirProduto =
    ("submit",
    (event) => {
      if (event.target.contains(".produto")) {
        produto.innerHTML = ``;
      }
    });
</script>


<body>
<div class="listaDeItens">
  <div class="produto">
    <input type="submit" value="EXCLUIR" />
    <p class="descricaoProduto">ITEM QUE DEVE SER EXCLUIDO</p>
  </div>
  <br />
  <div class="produto">
    <input type="submit" value="EXCLUIR" />
    <p class="descricaoProduto">ITEM QUE DEVE SER EXCLUIDO</p>
  </div>
</div>

javascript html

1 answer

1


Some problems in your code:

  • uses buttons, is more semantic and beyond the event submit has to be stopped to avoid reloading the page
  • const produto = document.querySelector(".produto"); loads 1 product, you have several... you would have to use querySelectorAll and iterate to tie an event headphone
  • produto.innerHTML = '' does not remove the product, only empties it of content

Suggestion:

  • uses buttons with `onclick``

  • seeks the .produto of that button with .closest

  • uses .remove() that is done to remove elements of the DOM 

//Função para excluir um item da lista
const excluirProduto = btn => btn.closest('.produto').remove();
<div class="listaDeItens">
  <div class="produto">
    <button type="button" value="EXCLUIR" onclick="excluirProduto(this)" />
    <p class="descricaoProduto">ITEM QUE DEVE SER EXCLUIDO</p>
  </div>
  <br />
  <div class="produto">
    <button type="button" value="EXCLUIR" onclick="excluirProduto(this)" />
    <p class="descricaoProduto">ITEM QUE DEVE SER EXCLUIDO</p>
  </div>
</div>

  • 2

    I liked more! Thank you.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.