Delete table row with pure Javascript

Asked

Viewed 162 times

-3

I have a table and I want to delete her lines, but I also want to prevent the first line from being deleted, I was able to make the code but it excludes besides the other lines, the first also

js code

const btnAdd = document.querySelector('a.add').addEventListener('click', function(){
    var table = document.getElementById('tabela')
    var row = table.insertRow(2)

row.insertCell(0).innerHTML = `<input type="text" name="r1[]" id='desc' placeholder="Descrição">`
row.insertCell(1).innerHTML = `<input type="text" name="r2[]" id='valor' placeholder="Valor">`
row.insertCell(2).innerHTML = `<input type="text" name="r3[]" id='quantidade' placeholder="Quantidade">`
row.insertCell(3).innerHTML = `<a href="#" class="remover" onclick="removerLinha()">Remover Campo</a>`
})


function removerLinha(){
    var result = document.getElementById('desc', 'valor', 'quantidade')
    result.parentNode.parentNode.remove()
}


HTML
<!DOCTYPE html>
<html>

<head>
    <title>Área Restrita</title>
    <meta charset="utf-8">
</head>

<body>

    <h1>Olá, <?php echo $dados['nome']; ?></h1>

    <a href="../controller/logout.php">Sair</a>
    <form action="../controller/salvaRegistro.php" method="POST">
        <table id="tabela">
            <thead>
                <tr>
                    <th>Descrição</th>
                    <th>Valor Unitário</th>
                    <th>Quantidade</th>
                </tr>
            </thead>
            <tbody>
                <tr id="s">
                    <td><input type="text" name="r1[]" id="desc" placeholder="Descrição"></td>
                    <td><input type="text" name="r2[]" id="valor" placeholder="Valor"></td>
                    <td><input type="text" name="r3[]" id="quantidade" placeholder="Quantidade"></td>
                    <a href="#" class="remover" onclick="removerLinha()" hidden>Remover Campo</a>
                    <a href="#" class="add">adicionar campo</a>
                </tr>
            </tbody>
        </table>
        
        <input id="enviar" type="submit" value="salvar">
    </form>
    <script src="main.js"></script>
</body>
</html>
javascript html

  • just so just change the HTML compos ids

1 answer

1


Just change the field ids in HTML

const btnAdd = document.querySelector('a.add').addEventListener('click', function(){
    var table = document.getElementById('tabela')
    var row = table.insertRow(2)

row.insertCell(0).innerHTML = `<input type="text" name="r1[]" id='desc' placeholder="Descrição">`
row.insertCell(1).innerHTML = `<input type="text" name="r2[]" id='valor' placeholder="Valor">`
row.insertCell(2).innerHTML = `<input type="text" name="r3[]" id='quantidade' placeholder="Quantidade">`
row.insertCell(3).innerHTML = `<a href="#" class="remover" onclick="removerLinha()">Remover Campo</a>`
})


function removerLinha(){
    var result = document.getElementById('desc', 'valor', 'quantidade')
    result.parentNode.parentNode.remove()
}
HTML
<!DOCTYPE html>
<html>

<head>
    <title>Área Restrita</title>
    <meta charset="utf-8">
</head>

<body>

    <h1>Olá, <?php echo $dados['nome']; ?></h1>

    <a href="../controller/logout.php">Sair</a>
    <form action="../controller/salvaRegistro.php" method="POST">
        <table id="tabela">
            <thead>
                <tr>
                    <th>Descrição</th>
                    <th>Valor Unitário</th>
                    <th>Quantidade</th>
                </tr>
            </thead>
            <tbody>
                <tr id="s">

            <!-- ******** aqui os ids mudados ********************** -->

                    <td><input type="text" name="r1[]" id="descNao" placeholder="Descrição"></td>
                    <td><input type="text" name="r2[]" id="valorNao" placeholder="Valor"></td>
                    <td><input type="text" name="r3[]" id="quantidadeNao" placeholder="Quantidade"></td>

                    <a href="#" class="add">adicionar campo</a>
                </tr>
            </tbody>
        </table>
        
        <input id="enviar" type="submit" value="salvar">
    </form>
    <script src="main.js"></script>
</body>
</html>

Browser other questions tagged javascript html

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