How to delete any array values from array on button click in each row-CodePudding

I want to delete row as well as delete that value from array but I want delete button on each row and need to delete any index value on button click

How can I insert delete button on each row and delete row as well as value from same array ?

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>"  

    //"<td>" <button href="javascript:void(0);" >Remove</button> "</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>

CodePudding user response：

You can achieve it by adding a column in a table to add button and then add onclick event to delete the record.

Demo :

var users = [];

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

  $("tbody").append("<tr id='row"   id   "'>"  
                    "<td>"   id   "</td>"  
                    "<td>"   name   "</td>"  
                    "<td><button onclick='deleteRecord("   id   ")'>Remove</button></td>"  
                    "</tr>");
});

function deleteRecord(id) {
  document.querySelector('#row'   id).remove();
  const updatedArray = users.filter((user) => Number(user[0]) !== id);
  console.log(updatedArray);
}

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>

    <body>
        <input type="number" 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>

CodePudding user response：

You need to add a remove button on each new line addition. Then add addEventListener "click" on the click button. The code added to the load table line will be like this

"<td>" "<button class='remCF1 btn btn-small btn-danger'"  "onClick='delRow(" idLastUser ")'>Delete</button></td>"

Then, add function delete in your js file

function delRow(idLastuser){
    document.getElementById("row" idLastUser).remove();
}

The overall code will be like this

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)
  var idLastUser = users.length - 1;
  loadTable($("tbody").append("<tr id='row"   idLastUser   "'>"  
    "<td>"   $("#id").val()   "</td>"  
    "<td>"   $("#name").val()   "</td>"  
    "<td>" "<button class='remCF1 btn btn-small btn-danger'"  "onClick='delRow(" idLastUser ")'>Delete</button></td>"  

    "</tr>"));
});

function delRow(idLastUser){
  document.getElementById("row" idLastUser).remove();
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

How to remove the table row in a table using JavaScript