Remove a table row with checkbox in Javascript

Question

I have a problem in my Javascript code. When I click on the checkbox, I can add player to the table, and I can delete them from the table. But when next I add somebody to the table, the deleted rows are inserted too into the table. I hope you can understand, whats my problem, and you can help for me.

 $(document).ready(function() { var players = ["Csabi", "Egér", "Miki", "Mazsi", "Sanyi", "Stam", "Szaki", "Tibi", "Tóni", "Zsolti"]; var count = players.length; var row = ""; var row1 = ""; var doubles = ""; var tr1 = "<tr class=\\"name\\"><td class=\\"names\\" colspan=\\"2\\">"; var tr2 = "</td><td class=\\"score\\">0</td><td class=\\"score\\">72</td><td class=\\"score1\\">"; $(document).on('click','input[type=button]',function(){ newPlayer = document.getElementById("newplayer").value; players.push(newPlayer); i = count + 1; alert(i); }); //Generate players from 'players' array for (i = 0; i < players.length; i++) { var div = document.createElement('div'); var input = document.createElement('input'); var label = document.createElement('label'); input.type = "checkbox"; input.value = players[i]; input.className = "players"; div.className = 'player'; label.className = "labelplayer"; label.innerHTML = players[i]; document.getElementsByClassName('playerarray')[0].appendChild(div); document.getElementsByClassName("player")[i].appendChild(input); document.getElementsByClassName("player")[i].appendChild(label); // alert("generate" + players[i]); }; var jatekosok = []; $("input.players").change(function () { var checked = $(this).prop("checked"); if (checked) { row += tr1 + $(this).attr("value") + tr2; jatekosok.push($(this).attr("value")); var szam = jatekosok.length; document.getElementById("row").innerHTML = row; alert("Játékosok száma: "+szam); for (i = 0; i < szam; i++) { alert("A játékhoz hozzáadva: " + jatekosok[i]); document.getElementsByClassName("name")[i].id = jatekosok[i]; }; } else { var removeplayer = $(this).attr("value"); alert("A törölt játékos: " + removeplayer); var rows = document.getElementById(removeplayer); rows.parentNode.removeChild(rows); alert("Megtörtént"); var removeplayer = $(this).attr("value"); var index = jatekosok.indexOf(removeplayer); alert(index); if (index > -1) { jatekosok.splice(index, 1); var szam = jatekosok.length; for (i = 0; i < szam; i++) { alert("A játékhoz hozzáadva: " + jatekosok[i]); document.getElementsByClassName("name")[i].id = jatekosok[i]; alert(i); }; }; } }); $(".double").change(function () { if ($(this).prop("checked")) { doubles += $(this).attr("value"); document.getElementById("footer").innerHTML = doubles; } }); //Dartboard events $("#dartboard #areas g").children().hover( function () { $(this).css("opacity", "0.6"); }, function () { $(this).css("opacity", "1"); } ); $("#dartboard #areas g").children().click(function () { alert($(this).attr("id")); }); $(document).ready(function () { $("#azs").click(function () { alert("0"); }); }); }); 

 fieldset { width: 500px; } div.player { color:blue; text-align:left; width: 98px; border:1px solid black; float:left; } input.players { } input#azs { position:relative; top:485px; right:515px; } input#undo { position:relative; top:485px; right:165px; } iframe { border:none; width:521px; height:516px; } iframe#dartboard { background-color:black; border:1px solid black; float:left; } svg#selecctor { position:relative; top:-194px; left:318px; } div#table { position:absolute; left:535px; top:16px; } table { border-spacing:0px; } td { border: 1px solid #ecefea; border-spacing: 0px; } tr { height:34px; } tr.name { font-size:23px; } td.header { background-color:white; box-shadow:0px -6px 14px 13px black inset; color:white; font-size:17px; width:350px; padding-left:6px; } td.scoreheader { width:120px; visibility:hidden; } td.name{ background-color:white; padding-left:6px; width:100px; } td.score { text-align:center; width:60px; box-shadow:0px -6px 24px 8px red inset; color:white; background-color:white; } td.score1 { border:none; width:33px; text-align:center; box-shadow:0px -6px 16px 8px green inset; font-size:19px; color:white; background-color:white; } table { font-family:arial; font-weight:bold; width:420px; position:relative; left:0px; top:0px; } table#row { width:348px; } 

 <!DOCTYPE html> <html> <head> <title>Borvirág Darts</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="js.js"></script> </head> <body> <fieldset> <legend>Játék beállítása</legend> <form> <div class="playerarray"></div> <div style="clear:both"></div> Új játékos:<input id="newplayer" type="text" name="player" value=""> <input type="button" name="newPlayer" value="Hozzáad"/><br> <input class="double" type="checkbox" name="double" value="DoubleIn">Double In<br> <input class="double" type="checkbox" name="double" value="DoubleOut">Double Out<br> <input class="game" type="radio" name="game" value="301">301<br> <input class="game" type="radio" name="game" value="501">501<br> <input class="game" type="radio" name="game" value="Cricket">Cricket<br> <input class="game" type="button" name="Submit" value="Game On" /> </form> </fieldset> <div id="table"> <table> <tr><td class="header" colspan="5">A csoport - 1. forduló <span> DOBÁS </span><span> PONT</span></td><td colspan="3" class="scoreheader"></td></tr> </table> <table id="row"></table> <table id="myTable"> <tr><td class="header" colspan="5"><span id="DI"></span></td><td colspan="3" class="scoreheader"></td></tr> </table> </div> <div id="demo"></div> </body> </html> 

Answer 1

It looks like when you're removing a player , you're not removing it from the players array but are just removing the physical row .

However, when you add a player you are using the players array by pushing to it (which still contains all players including removed players ).