title: Remove a table row with checkbox in Javascript
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 = "&lt;tr class=\"name\"&gt;&lt;td class=\"names\" colspan=\"2\"&gt;";
      var tr2 = "&lt;/td&gt;&lt;td class=\"score\"&gt;0&lt;/td&gt;&lt;td class=\"score\"&gt;72&lt;/td&gt;&lt;td class=\"score1\"&gt;";
          $(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 &lt; 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 &lt; 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 &gt; -1) {
                  jatekosok.splice(index, 1);
                  var szam    =   jatekosok.length;         
                  for (i = 0; i &lt; 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");
          });
      });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Borvirág Darts&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Játék beállítása&lt;/legend&gt;
          &lt;form&gt;
              &lt;div class="playerarray"&gt;&lt;/div&gt;
              &lt;div style="clear:both"&gt;&lt;/div&gt;
              Új játékos:&lt;input id="newplayer" type="text" name="player" value=""&gt;
              &lt;input type="button" name="newPlayer" value="Hozzáad"/&gt;&lt;br&gt;
              &lt;input class="double" type="checkbox" name="double" value="DoubleIn"&gt;Double In&lt;br&gt;
              &lt;input class="double" type="checkbox" name="double" value="DoubleOut"&gt;Double Out&lt;br&gt;
              &lt;input class="game" type="radio" name="game" value="301"&gt;301&lt;br&gt;
              &lt;input class="game" type="radio" name="game" value="501"&gt;501&lt;br&gt;
              &lt;input class="game" type="radio" name="game" value="Cricket"&gt;Cricket&lt;br&gt;
              &lt;input class="game" type="button" name="Submit" value="Game On" /&gt;
          &lt;/form&gt;
      &lt;/fieldset&gt;
      &lt;div id="table"&gt;
          &lt;table&gt;
              &lt;tr&gt;&lt;td class="header" colspan="5"&gt;A csoport - 1. forduló &lt;span&gt; DOBÁS &lt;/span&gt;&lt;span&gt; PONT&lt;/span&gt;&lt;/td&gt;&lt;td colspan="3" class="scoreheader"&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
          &lt;table id="row"&gt;&lt;/table&gt;
          &lt;table id="myTable"&gt;
              &lt;tr&gt;&lt;td class="header" colspan="5"&gt;&lt;span id="DI"&gt;&lt;/span&gt;&lt;/td&gt;&lt;td colspan="3" class="scoreheader"&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
  &lt;/div&gt;
          &lt;div id="demo"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>