Delete object in array when a checkbox is checked

Question

I have a small project with some fields that can insert and delete array objects. I have a problem on removing the selected row (using a checkbox) from my Array Object. Remove function works but does not remove the object in my array.

below is my html.

<div class="container">
    <input id="list-input" />
    <select id="select-status">
        <option value="on-going">on-going</option>
        <option value="completed">completed</option>
    </select>
    <button id="add">Add To List</button>
    <button id="delete">Remove From List</button>
</div>
<div class="container">
    <h1>Your List</h1>

    <div id="mylist">
        <table id="mylist">
            <thead>
                <th>ID Number</th>
                <th>Description</th>
                <th>Status</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <button id="clear">clear</button>
</div>

and my js for my add and remove function

var tasks = [];
var count = 0;

$('document').ready(function(){
    $('#add').click(function() {
    var desc    = $.trim($('#list-input').val());
    var status  = $('#select-status').val();
    var id      = Date.now();
    item        = {};

    if (!desc) {
        item.id = "";
        alert("Input a description");
        return;
    }

    //clear input field
    $('#list-input').val('');
    $('#list-input').focus();

    item.id          = id;
    item.description = desc;
    item.status      = status;
    tasks.push(item);


    var row  = "<tr>";
        row += "<td id="+ item.id +">" + item.id + "</td>";
        row += "<td>" + item.description + "</td>";
        row += "<td>" + item.status + "</td>";

    if(item.status === "completed"){
        row += "<td><input type='checkbox' name="+ item.id +"/></td>";
    }
    else{
        row += "<td><input type='checkbox' name="+ item.id +"/></td>";
    }

    $("#mylist tbody").append(row);
});

$('#delete').on('click', function() {
    if(confirm("Are you sure to delete selected list?")){
        $('#mylist input:checked').closest('tbody tr').remove();
    }
    else{
        return;
    }

});

It works for me: jsfiddle.net/barmar/0yhvbur2/1 I had to add a missing }); at the end of your code. — Barmar
– Barmar, Commented Dec 7, 2016 at 21:49
What's the exact problem? You need to be more specific. Unexpected behaviour? A runtime error? — George Lee
– George Lee, Commented Dec 7, 2016 at 21:49
remove function works in DOM but I wanted to remove the selected object in my array too — Jorge
– Jorge, Commented Dec 7, 2016 at 21:52

Community · Accepted Answer · 2020-06-20 09:12:55Z

UPDATE

@Jorge pointed out that it wasn't removing the correct item in array. It's fixed. Changed so that all checkboxes are collected, then each one is removed upon the condition of being checked.
Use .each() and .splice() like this:

$('#delete').on('click', function() {
  if(confirm("Are you sure to delete selected list?")){
      $(':checkbox').each(function() {
        var that = $(this);
        if(that.is(':checked')) {
          var obj = that.closest('tr');
          var idx = obj.index();
          obj.remove();
          tasks.splice(idx, 1);
        }...

BTW, there's 2 #myList but ids must be unique, so the div was changed to #xList.

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>SO41027903</title>

  <style>
  </style>
</head>

<body>
  <header>

  </header>
  <section>
    <div class="container">
      <input id="list-input" />
      <select id="select-status">
        <option value="on-going">on-going</option>
        <option value="completed">completed</option>
      </select>
      <button id="add">Add To List</button>
      <button id="delete">Remove From List</button>
    </div>
    <div class="container">
      <h1>Your List</h1>

      <div id="xlist">
        <table id="mylist">
          <thead>
            <th>ID Number</th>
            <th>Description</th>
            <th>Status</th>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <button id="clear">clear</button>
    </div>


  </section>
  <footer>&nbsp;</footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    var tasks = [];
    var count = 0;

    $('document').ready(function() {
      $('#add').click(function() {
        count++;
        var desc = $.trim($('#list-input').val());
        var status = $('#select-status').val();
        var id = Date.now();
        item = {};

        if (!desc) {
          item.id = "";
          alert("Input a description");
          return;
        }

        //clear input field
        $('#list-input').val('');
        $('#list-input').focus();

        item.id = id;
        item.description = desc;
        item.status = status;
        tasks.push(item);


        var row = "<tr>";
        row += "<td id=" + item.id + ">" + item.id + "</td>";
        row += "<td>" + item.description + "</td>";
        row += "<td>" + item.status + "</td>";

        if (item.status === "completed") {
          row += "<td><input type='checkbox' name=" + item.id + "/></td>";
        } else {
          row += "<td><input type='checkbox' name=" + item.id + "/></td>";
        }

        $("#mylist tbody").append(row);
      });

      $('#delete').on('click', function() {
        if (confirm("Are you sure to delete selected list?")) {
          $(':checkbox').each(function() {
            var that = $(this);
            if(that.is(':checked')) {
              var obj = that.closest('tr');
              var idx = obj.index();
              obj.remove();
              tasks.splice(idx, 1);
              count--;
            }

          });
          console.log(tasks);
          
        } else {
          return;
        }

      });


    });
  </script>
</body>

</html>

Collectives™ on Stack Overflow

Delete object in array when a checkbox is checked

1 Answer 1

UPDATE

SNIPPET

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

SNIPPET

Comments

Your Answer

Sign up or log in

Post as a guest

Related