'how to delete array value on button click in javascript

Here I am creating array of submitted data and save it into html tables. but now I also want to delete single row of data from same array on button click how can i do this

Note : I want to delete it from array as well as from table

    var users = []

    $(document).ready(loadTable);
    function loadTable() {
        for(var i = 0; i < users.length; i++){
            for(var j = 0; j < users[i].length; j++){
                //console.log(users[i][j])
            }
        {continue;}

        }
    }

    $("#submit").on('click', function() {
        var temp = [document.getElementById("id").value,document.getElementById("name").value]
        users.push(temp)

        loadTable ($("tbody").append("<tr>" +
            "<td>" + $("#id").val() + "</td>" +
            "<td>" + $("#name").val() + "</td>" +
            

            "</tr>"));
            
            console.log(users)
        });
        
    table, th, td {
        border: 1px solid black;
    }
<html>
    <head>
        <title>Hello</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>

    <body>
        <input type="text" name="id" id="id">
        <input type="text" name="name" id="name">
        <button type="button" id="submit">Add</button>
        <table id="demo">
            <tbody>
            </tbody>
        </table>
    </body>
</html>
javascripthtmlarraysonclickslice


Solution 1:[1]

Use a combination of array.pop() and element.remove() to remove last element in the array and table if exists.

var users = []

    $(document).ready(loadTable);
    function loadTable() {
        for(var i = 0; i < users.length; i++){
            for(var j = 0; j < users[i].length; j++){
                //console.log(users[i][j])
            }
        {continue;}

        }
    }

    $("#submit").on('click', function() {
        var temp = [document.getElementById("id").value,document.getElementById("name").value]
        users.push(temp)

        loadTable ($("tbody").append("<tr>" +
            "<td>" + $("#id").val() + "</td>" +
            "<td>" + $("#name").val() + "</td>" +
            

            "</tr>"));
            
       
        });
        $("#delete").on('click',function(){
        if(document.querySelectorAll('tbody > tr')){
        document.querySelectorAll('tbody > tr')[document.querySelectorAll('tbody > tr').length -1].remove();
        users.pop()
        console.log(users)
        }
        
        })
table, th, td {
        border: 1px solid black;
    }
<html>
    <head>
        <title>Hello</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>

    <body>
        <input type="text" name="id" id="id">
        <input type="text" name="name" id="name">
        <button type="button" id="submit">Add</button>
        <button type='button' id='delete'>Delete</button>
        <table id="demo">
            <tbody>
            </tbody>
        </table>
    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 James

Related Questions