Remove member from table when click on the button

Question

I am trying to delete a member from the table when clicking on the delete button but not able to target the main parent in order to remove it from the DOM. Here is what I've done so far. The removeUser is returning all index at the moment. What shall I do to resolve it? Also when clicking to + button which is hardcoded in HTML I should create a new row to append to the bottom of the table


    function CreateTable() {
        var members = [{
                "Team Member": "Erica Badu",
                "Email": "e.badu@example.com",
                "Permission Level": "Owner"
            },
            {
                "Team Member": "Pat Nelsson",
                "Email": "p.nelsson@example.com",
                "Permission Level": "Admin"
            },
            {
                "Team Member": "Pending acceptance",
                "Email": "j.dog@example.com",
                "Permission Level": "Standard"
            },
            {
                "Team Member": "Amy Namy",
                "Email": "a.namy@example.com",
                "Permission Level": "Standard"
            },
            {
                "Team Member": "Victor D.",
                "Email": "v.d@example.com",
                "Permission Level": "Standard"
            },
            {
                "Team Member": "Olly",
                "Email": "o.hunter@example.com",
                "Permission Level": "Standard"
            },

        ]

        var col = [];
        for (var i = 0; i < members.length; i++) {
            for (var key in members[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        var table = document.createElement("table");

        var tr = table.insertRow(-1);

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        for (var i = 0; i < members.length; i++) {

            tr = table.insertRow();

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell();
                tabCell.innerHTML = members[i][col[j]];
            }
        }

        var divContainer = document.querySelector(".table");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);

        $("tr td:nth-last-child(1)").append("<button> </button>");
        $("tr td:nth-last-child(1) button").addClass('remove');

        var removeUser = document.getElementsByClassName('remove');

        for (var i = 0; i < removeUser.length; i++) {
            const el = removeUser[i].closest('tr')
            console.log(el, 'hi')


            removeUser[i].addEventListener('click', function (e) {
                e.preventDefault
                console.log(removeUser[i].closest('tr'), 'CLOSEST')

            });
        }
    }
    CreateTable()

})

can you do your sample in code snippet(in edit mode one of the icon on top)? — Ajay2707, Mar 14 '20 at 18:23

score 0 · Accepted Answer · answered Mar 14 '20 at 18:30

The issue is because you're using removeUser[i].closest('tr') in the event handler, yet as you're calling that in a loop the reference to the original target element will be lost.

Instead of that, you can either use a closure around your event handler, or much more simply, use the this keyword to reference the clicked element:

this.closest('tr').remove();

function CreateTable() {
  var members = [{
    "Team Member": "Erica Badu",
    "Email": "e.badu@example.com",
    "Permission Level": "Owner"
  }, {
    "Team Member": "Pat Nelsson",
    "Email": "p.nelsson@example.com",
    "Permission Level": "Admin"
  }, {
    "Team Member": "Pending acceptance",
    "Email": "j.dog@example.com",
    "Permission Level": "Standard"
  }, {
    "Team Member": "Amy Namy",
    "Email": "a.namy@example.com",
    "Permission Level": "Standard"
  }, {
    "Team Member": "Victor D.",
    "Email": "v.d@example.com",
    "Permission Level": "Standard"
  }, {
    "Team Member": "Olly",
    "Email": "o.hunter@example.com",
    "Permission Level": "Standard"
  }]

  var col = [];
  for (var i = 0; i < members.length; i++) {
    for (var key in members[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

  var table = document.createElement("table");
  var tr = table.insertRow(-1);

  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.appendChild(th);
  }

  for (var i = 0; i < members.length; i++) {
    tr = table.insertRow();

    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell();
      tabCell.innerHTML = members[i][col[j]];
    }
  }

  var divContainer = document.querySelector(".table");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);

  $("tr td:nth-last-child(1)").append("<button> </button>");
  $("tr td:nth-last-child(1) button").addClass('remove');

  var removeUser = document.getElementsByClassName('remove');

  for (var i = 0; i < removeUser.length; i++) {
    const el = removeUser[i].closest('tr')
    removeUser[i].addEventListener('click', function(e) {
      e.preventDefault();
      this.closest('tr').remove();
    });
  }
}

CreateTable();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table"></div>

It works. What shall I do in order to create a new row that picks a random member when clicking to the 'add member' button? — Alessandro, Mar 14 '20 at 18:37
There's lots of resources showing how to generate a random number in JS if you search. However I don't see why you'd need to do that at all in this code. — Rory McCrossan, Mar 14 '20 at 18:38
Fair enough. See this answer: https://stackoverflow.com/a/1527820/519413 — Rory McCrossan, Mar 14 '20 at 18:40

Remove member from table when click on the button

1 Answers1