点击事件中实现静态行后加动态行并移除原静态行

嘿，我明白你的需求了——通过AJAX加载发票数据并追加动态行时，要自动移除页面上原本的静态占位行，但又得保留没加载数据时显示默认产品的逻辑。下面是具体的实现步骤：

第一步：给占位行做个“标记”（推荐方案） #

先给HTML里那两个静态的默认行加个专属类，比如placeholder-row，这样后面移除的时候不会误删动态添加的行，非常稳妥：

<!-- 修改后的静态占位行 -->
<tr class="item-row placeholder-row">
  <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
    <a class="delete" href="javascript:;" title="Remove row">X</a>
    <a class="add-product" href="javascript:;" title="Add Product">A</a>
  </div></td>
  <td class="description"><textarea form ="testinsert" name="item_desc[]">Business Rate: Consulting/Labor/Installs</textarea></td>
  <td><textarea class="cost" form ="testinsert" name="item_cost[]">$150.00</textarea></td>
  <td><textarea class="qty" form ="testinsert" name="item_qty[]">1</textarea></td>
  <td><span class="price" form ="testinsert" name="item_price[]">$150.00</span></td>
</tr>
<tr class="item-row placeholder-row">
  <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
    <a class="delete" href="javascript:;" title="Remove row">X</a>
    <a class="add-product" href="javascript:;" title="Add Product">A</a>
  </div></td>
  <td class="description"><textarea form ="testinsert" name="item_desc[]">Residential Rate: Consulting/Labor/Installs</textarea></td>
  <td><textarea class="cost" form ="testinsert" name="item_cost[]">$95.00</textarea></td>
  <td><textarea class="qty" form ="testinsert" name="item_qty[]">1</textarea></td>
  <td><span class="price" form ="testinsert" name="item_price[]">$95.00</span></td>
</tr>

第二步：在动态行加载完成后移除占位行 #

找到你代码里的populateTableRow函数，在所有动态行都追加完成、数据也填充好之后，加一行代码移除这些标记过的占位行：

function populateTableRow(data, selectedProductAutonum) {
  var invoices;
  //fill with JSON
  $.each(data, function(i, e) {
    if (this.cust_id == selectedProductAutonum) {
      invoices = this;
      custProducts = data.filter(({ cust_id }) => cust_id === selectedProductAutonum);
      $(".item-row:last").after(
        '<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name['+i+']">Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a><a class="add-product" href="javascript:;" title="Add Product">A</a></div></td><td class="description"><textarea form ="testinsert" name="item_desc['+i+']">Description</textarea></td><td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td><td><textarea class="qty" form ="testinsert" name="item_qty['+i+']">0</textarea></td><td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>'
      );
      if ($(".delete").length > 0) $(".delete").show();
      bind();
      $('#address-title').val(invoices.customer);
      $('#address-one').val(invoices.address);
      $('#invoice_num').val(invoices.invoice);
      $('#paid').val(invoices.paid);
      $('#owed').val(invoices.sales);
      $('#auto_num').val(invoices.autonum);
      $('[name="item_name['+i+']"]').val(invoices.product);
      $('[name="item_desc['+i+']"]').val(invoices.description);
      $('[name="item_cost['+i+']"]').val(invoices.cost);
      $('[name="item_qty['+i+']"]').val(invoices.quantity);
      $('[name="item_price['+i+']"]').val(invoices.price);
    }
  });

  // 新增：一键移除所有初始占位行
  $(".placeholder-row").remove();

  $(this).closest('tr').remove();
}

不想改HTML？试试这个替代方案 #

如果不想给静态行加新类，也可以直接通过行的位置来移除——你知道初始有2个占位行，那就在动态行添加后，移除前2个.item-row：

// 替代方案：移除前2个初始占位行
$(".item-row").slice(0, 2).remove();

不过这个方式要注意，如果以后默认占位行的数量变了，得同步修改数字，所以还是第一种加类的方式更靠谱。

最后验证一下逻辑 #

• 当你点击add-invoice加载数据并选择发票后，动态行出来了，初始的占位行也会自动消失；
• 要是不触发AJAX加载，直接用默认的小时费率产品，那些占位行会好好待着，完全符合你的需求~

内容的提问来源于stack exchange，提问作者BarclayVision