How to delete an object from array on Button click?

Question

I'm trying to perform a static crude operation. When user add a details on textbox it will stores in array of object and then that object print on table. Now I want to delete the row by delete button from array. I tried .splice() but it isn't working. The data is deleting from table but I want to delete it from array. I'm providing my page below:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Table With Bootstrap</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>

<body><br><br><br>
  <div class="container">
    <h1 align="center">Enter Details</h1><br>
    <div class="row">
      <div class="col-sm-4">
        <!--style="border:solid"-->
        <div>
          <label>Enter ID: </label><br>
          <input type="number" class="form-control" id="id" name="id" required/>

          <label>Enter Name: </label><br>
          <input type="text" class="form-control" id="name" name="name" required/>

          <label>Enter City: </label><br>
          <input type="text" class="form-control" id="city" name="city" required />

          <label>Enter Email: </label><br>
          <input type="email" class="form-control" id="email" name="email" required/><br>

          <button class="btn btn-success" onClick="printTable();">Submit</button> <button class="btn btn-danger" onClick="resetTable();">Reset Table</button></div>
      </div>
      <div class="col=sm-4">
        <h1 style="color: white">Hello World heyy</h1>
      </div>
      <div class="col-sm-4" style="float: right;">
        <table class="table table-sm table-striped table-hover  table-bordered" style="border-radius: 5px;">
          <thead class="thead-dark">
            <tr>
              <th>User ID</th>
              <th>User Name</th>
              <th>User Email</th>
              <th>User City</th>
              <th>User Delete</th>
            </tr>
          </thead>
          <tbody id="showResult">

          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script>
    let data = [];

    function resetTable() {
      const confirmMessage = confirm("Are you sure want to reset table data? It will delete all data from table. You cannot undo this action.!");
      if (confirmMessage) {
        window.location.reload();
        alert("Table Data Cleared Successfully");
      } else {
        alert("cancelled.!");
      }
    }

    function printTable() {
      const getId = document.getElementById("id").value;
      const getName = document.getElementById("name").value;
      const getCity = document.getElementById("city").value;
      const getEmail = document.getElementById("email").value;

      if (getId != '', getName != '', getCity != '', getEmail != '') {

        const obj = {
          id: getId,
          name: getName,
          city: getCity,
          email: getEmail
        }
        data.push(obj);
        print(data);
        $('#id').val("");
        $('#name').val("");
        $('#city').val("");
        $('#email').val("");
      } else {
        alert("All feilds are Mandatory..");
      }
    }

    function print(data) {

      let result = '';

      for (let i = 0; i < data.length; i++) {

        result += `

<tr id='row'>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].email}</td>
<td>${data[i].city}</td>
<td><input type='button' onclick='deleteRow(this);' class='btn btn-danger' value='Delete'/></td>
</tr>`;
        document.getElementById('showResult').innerHTML = result;
      }
    }

    function deleteRow(btn) {
      var cnfrmMessage = confirm("Are you sure want to Delete selected data? You cannot undo this action.");
      if (cnfrmMessage == true) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);


      } else {
        alert("Cancelled..!!");
      }
    }
  </script>


</body>

</html>

Huỳnh Tuân · Accepted Answer · 2019-10-29 10:52:21Z

1

I think you forget update your data array. Change your deleteRow function to

function deleteRow(btn) {
var cnfrmMessage = confirm("Are you sure want to Delete selected data? You cannot undo this action.");
if(cnfrmMessage == true){
    var row = btn.parentNode.parentNode;
    row.parentNode.removeChild(row);
    // update your data (remove item by row id)
    data = data.filter((item)=>item.id!==$(row).children()[0].innerText);
}
else{
    alert("Cancelled..!!");
}
}

Your array is literally a 'data'. So you need a unique id for delete specific row or do something on this. Other way, you can compare all fields in that row you want to delete, but it's not a good solution.

edited Oct 29, 2019 at 10:52

answered Oct 29, 2019 at 10:41

Huỳnh Tuân

1168 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aross Over a year ago

@MuhammadHassaan That's basically what I tried to explain in words... This site is not really meant for copy-paste working code or homework assignments. It's meant for explaining solutions

Muhammad Hassaan Over a year ago

yeah.. can you tell me how can i perform this task using .slice(); ?

Huỳnh Tuân Over a year ago

you can try event delegation to get index current element you want to delete and use .slice to slice without that index

aross · Accepted Answer · 2019-10-29 10:56:32Z

0

You need a way to identify the item in the list going off of the HTML element. Looks like you can use the id column (although usually it would be better to put something like that in an attribute). Then you can use filter:

Add the id to the deleteRow function.

deleteRow(this, ${data[i].id})

// Removes item with id.
var a = [
    {id:1},
    {id:2},
    {id:3},
    {id:4},
    {id:5},
    {id:6},
    {id:7},
    {id:8},
    {id:9}
];

a.filter(item => item.id != deleteId);

edited Oct 29, 2019 at 10:56

answered Oct 29, 2019 at 10:30

aross

3,6563 gold badges37 silver badges46 bronze badges

2 Comments

Muhammad Hassaan Over a year ago

if i do this, i'm restricted to delete the only row which has id of 3 .. and i want to delete the row in which user press delete button as shown in code.

aross Over a year ago

@MuhammadHassaan Like I said, get the id from the HTML element. But you can also add the id to the deleteRow function.

Collectives™ on Stack Overflow

How to delete an object from array on Button click?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related