Question

我遵循表格的HTML。实际的表太大了。作为参考，我在这个大型HTML表中只显示了两行：

<table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr  id="Row1">
      <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">
      <td><input type="text" name="pack[1]" id="pack_1" value="100" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[1]" id="quantity_1" value="10" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[1]" id="volume_1" value="1000" class="form-control" size="8"/></td>
      <td>
        <div class="btn-group">
          <select id="units_1" name="units[1]" class="form-control">
            <option value="" >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"  selected="selected">gms</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="amount[1]" id="amount_1" value="3.00" class="form-control" size="9"/><button class="close" aria-hidden="true" data-dismiss="alert" onclick="delete_rebate(this.id);return false;" type="button" style="margin: -26px -14px;float: right; color:#C00; opacity: 2;">×</button></td>
    </tr>
    <tr id="reb2">
      <td><input type="text" name="pack[2]" id="pack_2" value="200" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[2]" id="quantity_2" value="20" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[2]" id="volume_2" value="2000" class="form-control" size="8"/></td>
      <td>
        <div class="btn-group">
          <select id="units_2" name="units[2]" class="form-control">
            <option value="" >Select Unit</option>
            <option value="5" >Microsecond</option>
            <option value="7" >oz</option>
            <option value="9" >ml</option>
            <option value="10"  selected="selected">L</option>
            <option value="12" >gms</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="amount[2]" id="amount_2" value="6.00" class="form-control" size="9"/><button class="close" aria-hidden="true" data-dismiss="alert" onclick="delete_rebate(this.id);return false;" type="button" style="margin: -26px -14px;float: right; color:#C00; opacity: 2;">×</button></td>
    </tr>
  </tbody>
</table>

我写的jQuery函数如下：

function delete_rebate(field) {
  $('#'+field).remove();    
}

但它不起作用。有人可以帮我这方面吗？如果您想了解有关该问题的更多信息，我可以为您提供相同的信息。

Answer 1

看到对函数的调用会很有帮助。

我认为你可能在id上遇到了常见的问题。

执行控制台日志以查看删除折扣中字段的值。

请记住，编写一个只执行1个这样的短任务的函数会降低代码的速度并使其混乱。

只需使用ELEMENT.remove();简洁明了。

如果这不起作用，请查看jquery EQ函数

Answer 2

您确定要调用函数delete_rebate（）吗？如果是这样，您可能会尝试在文档完全加载之前调用该函数。我用tr（id =＆＃34; reb2＆＃34;）尝试了这个并且它起作用了：

    $(document).ready(function(){
        delete_rebate('reb2');
    });

    function delete_rebate(field) {
       $('#'+field).remove();    
    }

JSFiddle：http://jsfiddle.net/cAS9v/3/

Answer 3

您只需点击一下按钮即可调用您的功能并使用this.id。但是在这种情况下this指的是按钮。相反，你需要寻找表格行。也不要将您的事件处理程序硬编码到HTML中，分配它们：

$(".apnd-test button.close").click(function() {
  $(this).closest("tr").remove();
});

为什么在jQuery中使用以下代码不会删除表行？

3 个答案: