如何在javascript表中添加删除按钮

Question

我对这张桌子有点问题。当表格中有数据时，按钮删除不会出现。为此，我必须添加一个新行。

如何在表格内的所有行中显示此元素，因为如果内部有数据，则删除行是不可能的。这是我的问题。

谢谢

     <table  id="myTableAttributesOptions" class="table table-sm table-hover order-list-bot">
            <thead>
              <tr class="dataTableHeadingRow">
                <td><?php echo $OSCOM_ProductsAttributesNew->getDef('text_heading_attributes_option_value_name'); ?></td>
                <td><?php echo $OSCOM_ProductsAttributesNew->getDef('text_heading_attributes_image'); ?></td>
                <td><?php echo $OSCOM_ProductsAttributesNew->getDef('text_heading_attributes_sort_order'); ?></td>
                <td class="text-md-right"><?php echo $OSCOM_ProductsAttributesNew->getDef('text_heading_attributes_actions'); ?></td>
              </tr>
            </thead>
            <tbody>
<?php
  $i = 0;
  while ($QoptionsValue->fetch()) {
?>
              <tr>
                <td><?php echo HTML::inputField('name[' . $i . ']', $QoptionsValue->value('name'), 'id="name[' . $i . ']"'); ?></td>
                <td><?php echo HTML::inputField('image[' . $i . ']', $QoptionsValue->value('image'), 'id="image[' . $i . ']"'); ?></td>
                <td class="text-md-right"><?php echo HTML::inputField('sort_order[' . $i . ']', $QoptionsValue->value('sort_order'), 'id="sort_order[' . $i . ']"'); ?></td>
                <td width="10%"><a id="deleteRowBot" class="deleteRowBot"></a></td>
 </tr>
<?php
  $i = $i +1;
  }
?>

            </tbody>
            <tfoot>
              <tr>
                <td colspan="5">
                  <input type="button" class="btn btn-lg btn-block " id="addRowBot" value="<?php echo $OSCOM_ProductsAttributesNew->getDef('text_add_row'); ?>" />
                </td>
              </tr>
            </tfoot>
          </table>

我的javascript。

<script>
  $(document).ready(function () {
    var counter = <?php echo $i; ?>

    $("#addRowBot").on("click", function () {
      var newRow = $("<tr>");
      var cols = "";

      cols += '<td><input type="text" class="form-control" name="name[' + counter + ']"/></td>';
      cols += '<td><input type="text" class="form-control" name="image[' + counter + ']"/></td>';
      cols += '<td><input type="text" class="form-control" name="sort_order[' + counter + ']"/></td>';
      cols += '<td><input type="button" class="ibtnDelBot btn btn-md btn-danger" id="deleteRowBot[' + counter + ']" value="<?php echo $button_delete; ?>"></td>';

      newRow.append(cols);
      $("table.order-list-bot").append(newRow);
      counter++;
    });

    $("table.order-list-bot").on("click", ".ibtnDelBot", function (event) {
      $(this).closest("tr").remove();
      counter -= 1
    });
  });
</script>

html

<table id="myTableAttributesOptions" class="table table-sm table-hover order-list-option">
            <thead>
              <tr class="dataTableHeadingRow">
                <td>text_heading_attributes_option_value_name</td>
                <td>text_heading_attributes_image</td>
                <td>text_heading_attributes_sort_order</td>
                <td class="text-md-right">text_heading_attributes_actions</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input name="name[0]" value="Small" id="name[0]" class="form-control" type="text"></td>
                <td><input name="image[0]" id="image[0]" class="form-control" type="text"></td>
                <td class="text-md-right"><input name="sort_order[0]" value="1" id="sort_order[0]" class="form-control" type="text"></td>




                <td width="10%"><a id="deleteRowBot[0]" class="deleteRowBot ibtnDelBot"></a></td>




              </tr>
              <tr>
                <td><input name="name[1]" value="Medium" id="name[1]" class="form-control" type="text"></td>
                <td><input name="image[1]" id="image[1]" class="form-control" type="text"></td>
                <td class="text-md-right"><input name="sort_order[1]" value="2" id="sort_order[1]" class="form-control" type="text"></td>
                <td width="10%"><a id="deleteRowBot[1]" class="deleteRowBot ibtnDelBot"></a></td>
              </tr>
              <tr>
                <td><input name="name[2]" value="Large" id="name[2]" class="form-control" type="text"></td>
                <td><input name="image[2]" id="image[2]" class="form-control" type="text"></td>
                <td class="text-md-right"><input name="sort_order[2]" value="3" id="sort_order[2]" class="form-control" type="text"></td>
                <td width="10%"><a id="deleteRowBot[2]" class="deleteRowBot ibtnDelBot"></a></td>
              </tr>

            </tbody>
            <tfoot>
              <tr>
                <td colspan="5">
                  <input class="btn btn-lg btn-block " id="addRowBot" value="text_add_row" type="button">
                </td>
              </tr>
            </tfoot>
          </table>