How do I click a button and remove the table row via javascript?

Question

Hi, how do I click a button and remove the table row via javascript? The most I can do is remove a cell.

HTML :

JAVASCRIPT:

result when you click the button :

Answer 1

Speak up, Caião. See if it helps you.

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>

In the code above, in HTML, when we click on the element (button), we send it itself by parameter in the function removeElement(parameter).

In the Javascript, we receive this element and Closest(), We’re looking for your nearest ancestor "tr".

Finally, we use the method remove() (JS native) to remove this "tr".

Reference of the Closest: Closest

If you need anything, let me know. Hugging !