Botão remover em javascript não funciona

[John Hebert Trindade]

Boa noite a todos, tenho um formulário como se fosse um carrinho de compras.

no form tenho a tabela da seguinte forma:

<input type="button" name="addProduto" id="addProduto" class="input-adm btn-warning" value="Incluir">
<table class="table-list">
	<thead class="list-head">
    	<tr>
        	<th class="list-head-content sizeone table-md-none">Código Barras</th>
            <th class="list-head-content sizefive table-md-none">ID</th>
            <th class="list-head-content sizetwo">Nome do produto</th>
            <th class="list-head-content sizethree">Quantidade</th>
            <th class="list-head-content sizefour">Ações</th>
        </tr>
    </thead>

    <tbody class="list-body">

    </tbody>
</table>

Em javascript adiciono os produtos a tabela, o adicionar está funcionando, mas o remover não funciona, o que errei?

//Adicionar Produtos ao carrinho
document.getElementById('addProduto').addEventListener('click', incluirProduto)
//Remover Produtos ao carrinho
document.getElementById('.remove').addEventListener('click', removerProduto)
function incluirProduto(){
  const selectProduct = document.getElementById('adms_produto_id')
  const optionText = selectProduct.options[selectProduct.selectedIndex].text
  const id = selectProduct.options[selectProduct.selectedIndex].value
  const barcode = selectProduct.options[selectProduct.selectedIndex].getAttribute('data-barcode')
  const qtde = document.getElementById('qtde').value

  const html = `<tr><td class="list-body-content table-md-none sizeone"><input type="text" name="codigo_barras[]" id="codigo_barras" class="input-adm" placeholder="Código Barras" autocomplete="on" required value="${barcode}"></td><td class="list-body-content table-md-none sizefive" name="id[]">${id}</td><td class="list-body-content sizetwo">${optionText}</td><td class="list-body-content sizethree"><input type="number" name="qtde[]" id="qtde" class="input-adm" placeholder="Qtde" autocomplete="off" required value="${qtde}"></td><td><input type="button" class="input-adm btn-danger" name="remove" id="remove" value="Remover"></td></tr>`;

  const x = 1;

  document.querySelector('tbody.list-body').innerHTML += html
}

function removerProduto(){
  document.querySelector('tbody.list-body').closest('tr').remove();
}

 

[Ivo Vicente]

O document.getElementById('.remove').addEventListener('click', removerProduto) está à escuta de uma classe .remove que não existe no botão de remover

[John Hebert Trindade]

testei das seguinte formas e não resultou:

const html = `<tr><td class="list-body-content table-md-none sizeone"><input type="text" name="codigo_barras[]" id="codigo_barras" class="input-adm" placeholder="Código Barras" autocomplete="on" required value="${barcode}"></td><td class="list-body-content table-md-none sizefive" name="id[]">${id}</td><td class="list-body-content sizetwo">${optionText}</td><td class="list-body-content sizethree"><input type="number" name="qtde[]" id="qtde" class="input-adm" placeholder="Qtde" autocomplete="off" required value="${qtde}"></td><td><input type="button" class="input-adm btn-danger remove" name="remove" id="remove" value="Remover"></td></tr>`;

e assim:

const html = `<tr><td class="list-body-content table-md-none sizeone"><input type="text" name="codigo_barras[]" id="codigo_barras" class="input-adm" placeholder="Código Barras" autocomplete="on" required value="${barcode}"></td><td class="list-body-content table-md-none sizefive" name="id[]">${id}</td><td class="list-body-content sizetwo">${optionText}</td><td class="list-body-content sizethree"><input type="number" name="qtde[]" id="qtde" class="input-adm" placeholder="Qtde" autocomplete="off" required value="${qtde}"></td><td><input type="button" class="remove" name="remove" id="remove" value="Remover"></td></tr>`;

 

[John Hebert Trindade]

Já consegui resolver.

Se coloco como um input não funciona, mas se coloco como button já da certo