javascript - 如何使用 jQuery 删除动态添加的行

Question

我通过克隆将行添加到我的表中。当用户单击“删除行”按钮时，每行的开头应出现一个复选框，选择该复选框后将删除该特定行。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
  <thead>
    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
    </tr>
  </thead>
  <tbody>
    <tr id="id01" name="row">
      <td>


        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()">
          <option value="">Select</option>
          <option value="GDS">Guides</option>
          <option value="LOF">Latest Offers</option>
          <option value="TEM">Templates</option>
          <option value="VID">Videos</option>
        </select>
      </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />

      </td>
      <td>
        <input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />

      </td>
    </tr>
  </tbody>
</table>
<div class="buttonarea">
  <ul>
    <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
  </ul>
  <ul>
    <li><input tabindex="6" id="Button4" value="Delete Row" class="delButtons" name="Button4" type="button" /></li>
  </ul>
</div>

$("#dataTable").on('click', '.delButtons', function () {
var $tr = $('#dataTable tbody tr:last');
$tr.remove();
});

任何帮助将不胜感激。谢谢

Answer 1

您可以尝试下面的代码，在单击删除按钮时添加复选框，并在单击新添加的复选框时删除行

$(function(){
   $('.delButtons').on('click', function(){
       $('#dataTable thead tr').each(function(){
          if($(this).find('.removeBtnHeader').length==0) {
            $(this).find('td:first').before('<td class="removeBtnHeader"></td>');
          }
       });
       $('#dataTable tbody tr').each(function(){
          if($(this).find('.removeBtn').length==0) {
            $(this).find('td:first').before('<td><input type="checkbox" class="removeBtn"></td>');
          }
       });
   });
   
   $(document).on('click', '.removeBtn', function(){
     $(this).closest('tr').remove();
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
  <thead>
    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
    </tr>
  </thead>
  <tbody>
    <tr id="id01" name="row">
      <td>


        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
          <option value="">Select</option>
          <option value="GDS">Guides</option>
          <option value="LOF">Latest Offers</option>
          <option value="TEM">Templates</option>
          <option value="VID">Videos</option>
        </select>
      </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}"  />

      </td>
      <td>
        <input  id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}"  />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}"  />

      </td>
    </tr>
    <tr id="id02" name="row">
      <td>


        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
          <option value="">Select</option>
          <option value="GDS">Guides</option>
          <option value="LOF">Latest Offers</option>
          <option value="TEM">Templates</option>
          <option value="VID">Videos</option>
        </select>
      </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}"  />

      </td>
      <td>
        <input  id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}"  />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}"  />

      </td>
    </tr>
  </tbody>
</table>
        <div class="buttonarea">
  <ul>
    <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
  </ul>
  <ul>
    <li><input tabindex="6" id="Button4" value="Delete Row" class="delButtons" name="Button4" type="button" /></li>
  </ul>
</div>