删除表行后，insertRow（）函数将继续现有行

Question

Bug Image

当我单击``为朋友''单选按钮并单击以返回组注册时，该表行将被删除。但是当我单击+ Add Runner按钮时，仍继续插入该行，而该行根本没有被删除。通过$("#tbl_groupreg").find("tr").remove();删除了代码，但仍然显示该行，并且仍然从上一行继续插入。即使您将单选按钮从组更改为，也如何通过插入新行来修复添加运行器。

$("#radioreg").on("change", function() {

  if (document.getElementById('sreg').checked) {

  } else if (document.getElementById('freg').checked) {

  } else if (document.getElementById('greg').checked) {
    $("#tbl_groupreg").find("tr").remove();
    $("#grpregbtn").on("click", function() {
      var value = parseInt(document.getElementById('grprunner').value);
      //value = isNaN(value) ? 0 : value;
      value++;
      document.getElementById('grprunner').value = value;


      var tbody = document.getElementById("groupreg");
      var row = tbody.insertRow(-1);
      var cell1 = row.insertCell(-1);

      cell1.innerHTML = "<div class='inner'><div class='form-row'><div class='form-group col-md-12'><button class='close' aria-label='Close'><span aria-hidden='true'>&times;</span></button></div></div><div class='form-row'><div class='form-group col-md-2'><label for='runregforName'> Name of Runner</label></div><div class='form-group col-md-10'><input type='text' class='form-control' name='grouprunregforName[]' placeholder='Name of Runner'></div></div><div class='form-row'><div class='form-group col-md-2'><label for='runregforIC'> IC of Runner </label></div><div class='form-group col-md-10'><input type='text' class='form-control' name='grouprunregforIC[]' placeholder='IC of Runner '></div></div><div class='form-row'><div class='form-group col-md-2'><label for='runregforNum'> Contact Number of Runner </label></div><div class='form-group col-md-10'><input type='text' class='form-control' name='grouprunregforNum[]' placeholder='Contact Number of Runner '></div></div></div>";

    });

    $('#groupreg').on('click', '.close', function() {
      $(this).closest('tr').remove();
      // $(this) is the button
      var value = parseInt(document.getElementById('grprunner').value);
      //value = isNaN(value) ? 0 : value;
      value--;
      document.getElementById('grprunner').value = value;

    });

  } else {

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <div class="form-group col-md-2">
    <label for="racePack" class="runnerText">Run Registration For</label>
  </div>

  <div class="form-group col-md-10" id="radioreg">
    <div class="form-check form-check-inline">
      <label class="form-check-label">
    							&nbsp;<input class="form-check-input" type="radio" name="runregforop" id="sreg" value="s" onclick="hideThis('runregfor');hideThis('runregforgroup')"> Self Registration
    						  </label>
    </div>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
    							<input class="form-check-input" type="radio" name="runregforop" id="freg" value="f" onclick="showThis('runregfor');hideThis('runregforgroup')"> For A Friend
    						  </label>
    </div>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
    							<input class="form-check-input" type="radio" name="runregforop" id="greg" value="g" onclick="showThis('runregforgroup');hideThis('runregfor')"> Group Registration
    						  </label>
    </div>
  </div>
</div>

<div class="d-none" id="runregforgroup">
  <div class="form-group col-md-12">
    <input type="text" id="grprunner" value="1" />
    <div class="card">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table" id="tbl_groupreg">
            <thead>
              <tr>
                <th scope="col">Group Registration</th>
              </tr>
            </thead>
            <tbody id="groupreg">

            </tbody>
          </table>
          <button type="button" id="grpregbtn" style="cursor:pointer;margin-left:5px">+Add Runner</button>
        </div>
      </div>
    </div>
  </div>


</div>