为什么删除图标按钮未在以下场景中附加 <select>？答案

【问题标题】：Why the Delete icon button is not attaching the <select> in following scenario?为什么删除图标按钮未在以下场景中附加 <select>？
【发布时间】：2014-06-30 18:12:29
【问题描述】：

我正在关注<table> 的 HTML 标记

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th style="vertical-align:middle">Products</th>
      <th style="vertical-align:middle">Pack Of</th>
      <th style="vertical-align:middle">Quantity</th>
      <th style="vertical-align:middle">Volume</th>
      <th style="vertical-align:middle">Unit</th>
      <th style="vertical-align:middle">Rebate Amount</th>
    </tr>
  </thead>
  <tbody class="apnd-test">
    <tr id="reb1_1">
      <td>
        <div class="btn-group">
          <select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
            <option value=""  selected='selected'>Select Product</option>
            <option value="5" >Chesse</option>
            <option value="8" >Laptop an</option>
            <option value="9" >Prosecco</option>
            <option value="10" >Coffee</option>
            <option value="11" >Tea</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
      <td>
        <div class="btn-group">
          <select name="units[1]" id="units_1" class="form-control">
            <option value=""  selected='selected'>Select Unit</option>
            <option value="5" >Microsecond</option>
            <option value="7" >oz</option>
            <option value="9" >ml</option>
            <option value="10" >L</option>
            <option value="12" >gms</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr id="reb1_2">
      <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
      <td colspan="5"></td>                            
    </tr>
  </tfoot>                                           
</table>

我在单击添加按钮时附加控件。它工作正常。我还将删除图标附加到新添加的图标上，但它没有被分配/显示。此外，当用户单击任何有关<select> 的删除图标时，应该被删除。我已经编写了以下代码，但它不起作用。

$(function () {
    $(document).delegate('.products', 'click', function (e) {
        var table_id = $(this).closest('table').attr('id');
        var no = table_id.match(/\d+/)[0];
        var first_row = $('#' + table_id).find('tbody tr:first').attr('id');
        var toBeCloned = $('#' + first_row).find('td:first').find('select:last');
        var new_row = toBeCloned.clone();
        var idCounter = toBeCloned.attr('id').split('_');
        var new_id = 'product_id_' + no + '_' + (parseInt(idCounter[3]) + 1);
        var new_name = 'product_id_' + no + '[' + (parseInt(idCounter[3]) + 1 + ']');
        var elementToAppendTo = $('#' + table_id).find('tbody tr:first .btn-group:first');
        $(new_row).appendTo(elementToAppendTo).attr('id', new_id);
        $(new_row).appendTo(elementToAppendTo).attr('name', new_name);
        $('<button id="' + sel_id + '" style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo(elementToAppendTo);
        //function to delete HTML select element from add rebate by product grid 
        //$('.delete').on('click', deleteRow);
        $('.delete').on('click', function () {
            var prd_id = $(this).attr("id");
            $(this).remove();
            $("#" + prd_id).remove();
        });
    });
});

有人可以在这方面帮助我吗？这里是我用上面的 HTML 和 jQuery 代码创建的 jsFiddle 链接供您参考：

Fiddle

【问题讨论】：

sel_id 未定义

标签： javascript jquery html jquery-append

【解决方案1】：

问题是您使用了按钮id=sel_id 并且sel_id 没有在任何地方定义。

你需要像下面这样使用id=new_id

$('<button  id="'+new_id
   +'"style="color:#C00; opacity: 2;margin-top: 6px;"'
   +' type="button" class="close delete" data-dismiss="alert"'
   +' aria-hidden="true">&times;</button>')
.appendTo($(elementToAppendTo));

请看JSFiddle

【讨论】：

【解决方案2】：

在这一行：

$('<button id="' + sel_id + '" style="color:#C00; opacity: 2;....

您的“sel_id”未定义

【讨论】：