Удалить участника из таблицы при нажатии на кнопку - PullRequest
Новая
       9

Удалить участника из таблицы при нажатии на кнопку

1 голос
/ 14 марта 2020

Я пытаюсь удалить участника из таблицы при нажатии на кнопку удаления, но не могу нацелиться на основного родителя, чтобы удалить его из DOM. Вот что я сделал до сих пор. RemoveUser возвращает весь индекс в данный момент. Что я должен сделать, чтобы решить это? Также при нажатии на кнопку +, которая жестко закодирована в HTML, я должен создать новую строку для добавления в конец таблицы 


    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()

})

1 Ответ

0 голосов
/ 14 марта 2020

Проблема в том, что вы используете removeUser[i].closest('tr') в обработчике событий, но при вызове этого в al oop ссылка на исходный целевой элемент будет потеряна.

Вместо что вы можете использовать замыкание вокруг вашего обработчика событий или, что намного проще, использовать ключевое слово this для ссылки на элемент, по которому щелкнули: 

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