-3

Oi, como faço para clicar em um botão e remover a linha da tabela via javascript? o máximo que conseguir foi remover uma célula.

HTML :

inserir a descrição da imagem aqui

JAVASCRIPT:

inserir a descrição da imagem aqui

resultado quando clica o botão :

inserir a descrição da imagem aqui

7
  • 1
    E ai, Caião. Beleza ? Evite colocar print de códigos, e sim, copie o código e o coloque. Isso as pessoas copiarem seu código e reproduzem para tentarem achar uma solução pra você. 3/05/2020 às 3:01
  • Eu tento colocar, mas a página lê o html na mostra ele
    – caio
    3/05/2020 às 6:03
  • Tem um ícone que fica ao lado do ícone de inserir imagem (do lado direito). Ali você deve inserir códigos HTML, CSS, JavaScript. 3/05/2020 às 15:39
  • Coloca o html de qualquer jeito que nós consertamos. Mas só para ficar sabendo o texto aqui é formatado com markdown. 3/05/2020 às 15:46
  • O que é markdown ? 3/05/2020 às 15:49

1 Resposta 1

1

function removerElemento(elementoClicado) {
  elementoClicado.closest("tr").remove();
}
<table border="2" id="tabela">
  <thead>
    <tr class="tr-cabecalho">
      <th>Nome do Produto</th>
      <th>Descrição</th>
      <th>Qtd Estoque</th>
      <th>Valor</th>
      <th>Descontos</th>
      <th>Ações</th>
    </tr>
  </thead>

  <tbody>
    <tr class="tr-corpo-1">
      <td>Avast</td>
      <td>Protetor Antivírus</td>
      <td>5</td>
      <td>R$ 30.00</td>
      <td>0</td>
      <td nowrap>
        <button class="editar">Editar</button>
        <button class="apagar" onclick="removerElemento(event.target)">Apagar</button>
      </td>
    </tr>
    <tr class="tr-corpo-2">
      <td>Word</td>
      <td>Editor de Texto</td>
      <td>5</td>
      <td>R$ 250.00</td>
      <td>0</td>
      <td nowrap>
        <button class="editar">Editar</button>
        <button class="apagar" onclick="removerElemento(event.target)">Apagar</button>
      </td>
    </tr>
  </tbody>
</table>

No código acima, no HTML, quando clicamos no elemento (botão), enviamos ele mesmo por parâmetro na função removerElemento(parâmetro).

No JavaScript, recebemos esse esse elemento e no closest(), procuramos o seu ancestral mais próxima que seja uma "tr".

Por fim, utilizamos o método remove() (nativo do JS) para remover essa "tr".

Referência do closest: Closest

7
  • Muito obrigado!!!! Irei testar
    – caio
    3/05/2020 às 16:09
  • Nada, Caio. Qualquer coisa estamos ai. Se, após testar, a resposta for útil pra você, é só clicar no "V" ali para aceitar a resposta. Mas faça isso só se a resposta resolver o seu problema por completo. Qualquer dúvida, é só falar por aqui que eu edito a resposta. Que a força esteja conosco ! 3/05/2020 às 16:20
  • acabei de testar e funcionou perfeitamente, muito obrigado GAMBI
    – caio
    3/05/2020 às 16:47
  • gambi, você poderia me ajudar em outra coisa?
    – caio
    3/05/2020 às 16:48
  • Claro, brother. Se eu tiver conhecimento. Manda ai. 3/05/2020 às 17:01

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