无法删除动态创建的行。 .add-row将创建动态行，但.delete不会将其删除。但是，最初的.item-row将执行click事件并删除该行。
单击事件似乎从未在添加的行上触发？
<form action="insert.php" id="testinsert" method="POST">
<input type="submit" value="Submit" />
</form>
<!--div class="font-effect-shadow-multiple">This is a font effect!<div-->
<div id="page-wrap">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<div form ="testinsert" name="business-address" id="business-address">
<span id="cmtext">Fix it Guy </span><br>
43150 Your Drive<br>
Potomac City, MD 20901<br>
Phone: (301) 555-5580</div>
<div id="logo">
<div id="logoctr">
<a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a>
<a href="javascript:;" id="save-logo" title="Save changes">Save</a>
|
<a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
<a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/CM_LOGO.JPG" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<div class="container">
<div class="space"></div>
<!--
<textarea form ="testinsert" name="customer" id="customer-title">Customer Name</textarea>
-->
<textarea form ="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form ="testinsert" name="address1" id="address-one"></textarea>
<!--
<textarea form ="testinsert" name="address2" id="address-two">..</textarea>
<textarea form ="testinsert" name="address3" id="address-three"></textarea>
-->
</div>
<img src="http://www.jeffbarclay.com/invoice/images/green-plus.png" class="lookup-cust-plus" id="look"/>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" id="invoice_num" name="invoice">20170130</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">Janruary 30, 1960</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$0.00</div></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th> <th>Description</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="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[]"></textarea></td>
<td><textarea class="cost" form ="testinsert" name="item_cost[]"></textarea></td>
<td><textarea class="qty" form ="testinsert" name="item_qty[]"></textarea></td>
<td><span class="price" form ="testinsert" name="item_price[]"></span></td>
</tr>
<tr id="hiderow">
<td colspan="5">
<img src="http://www.jeffbarclay.com/invoice/images/rows.png" width="30px" height="auto" id="addrow" href="javascript:;" title="Add a row"/>
<img src="http://www.jeffbarclay.com/invoice/images/products.png" width="30px" height="auto" href="javascript:;" id="fill-invoice" class="add-invoice" title="Add Invoice"/>
<img src="http://www.jeffbarclay.com/invoice/images/products.png" width="30px" height="auto" href="javascript:;" id="recall_product" class="recall-product" title="Recall Product"/>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div id="owed" class="due">$0.00</div></td>
</tr>
</table>
<input type="hidden" form ="testinsert" name="xdate" id="xdate"></input>
<input type="hidden" form ="testinsert" name="sales" id="sales"></input>
<input type="hidden" form ="testinsert" name="owed" id="owed"></input>
<input type="hidden" form ="testinsert" name="deducted" id="deducted"></input>
<input type="hidden" form ="testinsert" name="auto_num" id="auto_num"></input>
<div id="terms">
<h5>Terms</h5>
<textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
</div>
</div>
<!--Contact Form -->
<div id="store_customer_div">
<form class="form" action="insert_customer.php" id="contact" method="POST">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h3>Store Customers</h3>
<hr/><br/>
<label>Customer Name: <span>*</span></label>
<br/>
<input type="text" id="name" placeholder="Name" name="customer"/><br/>
<br/>
<label>Email: <span>*</span></label>
<br/>
<input type="text" id="email" placeholder="Email" name="email"/><br/>
<br/>
<label>Contact No: <span></span></label>
<br/>
<input type="text" id="contactno" placeholder="10 digit Mobile no." name="contact"/><br/>
<br/>
<label>Address 1: <span></span></label>
<br/>
<input type="text" id="address1" placeholder="address1" name="address1"/><br/>
<br/>
<label>Address 2: <span></span></label>
<br/>
<input type="text" id="address2" placeholder="address2" name="address2"/><br/>
<br/>
<label>Address 3: <span></span></label>
<br/>
<input type="text" id="address3" placeholder="address3" name="address3"/><br/>
<br/>
<input type="button" id="send" value="Store Customer"/><br/>
</form>
</div>
<!--Product Form -->
<div id="store_product_div">
<form class="form" action="insert_products.php" id="form_product" method="POST">
<img src="images/button_cancel.png" class="img" id="p_cancel"/>
<h3>Store Products</h3>
<hr/><br/>
<label>Product Name: <span>*</span></label>
<br/>
<input type="text" id="p_name" placeholder="Product Name" name="product"/>
<br/>
<label>Rate: <span>*</span></label>
<br/>
<input type="text" id="p_rate" placeholder="Sales Price $" name="rate"/><br/>
<br/>
<label>Cost: <span>*</span></label>
<br/>
<input type="text" id="p_cost" placeholder="Cost" name="cost"/><br/>
<br/>
<label>Taxable: <span>*</span></label>
<br/>
<input type="text" id="p_tax" placeholder="Taxable" name="taxable"/><br/>
<br/>
<label>Description: <span>*</span></label>
<br/>
<input type="text" id="p_desc" placeholder="Description" name="desc"/><br/>
<br/>
<input type="submit" id="send" value="Store Product"/><br/>
</form>
</div>
<div id="customer_div">
<form class="form" action="customer_fill.php" id="contact" method="GET">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h2>Customer List</h2>
<ul id="dropdown" name="ddname"></ul>
</form>
</div>
<div id="product_div">
<form class="form" action="product_fill.php?action=fill" id="contact" method="GET">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h2>Product List</h2>
<ul id="ddproduct" name="ddproductname"></ul>
</form>
</div>
<div id="invoice_div">
<form class="form" action="invoice_fill.php" id="contact" method="GET">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h2>Invoice List</h2>
<ul id="ddinvoice" name="ddinvoicename"></ul>
</form>
</div>
JS：
请参阅：https://jsfiddle.net/xzt1krqn/
$(".delete").on('click', function() {
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
答案 0 :(得分：1)
您必须使用文档选择器来选择动态创建的元素。
$(document).on('click','.delete',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});