Different Methods

app.js

//User Interface Class
class Interface {
  static dispalyPlayers() {
    const RegisteredPlayers = Register.getPlayers();

    const players = RegisteredPlayers;

    players.forEach(player => UI.addPlayers(player));
  }

  static addPlayers(player) {
    const list = document.querySelector('#playerlist');

    const row = document.createElement('tr');
    row.innerHTML = `
    <td>${player.firstname}</td>
    <td>${player.lastname}</td>
    <td>${player.residence}</td>
    <td>${player.position}</td>
    <td>${player.country}</td>
    <td>${player.jerseynumber}</td>
    <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
    `;
    list.appendChild(row);
  }

  static deletePlayer(el) {
    if (el.classList.contains('delete')) {
      el.parentElement.parentElement.remove();
    }
  }
}