我一直在尝试将删除功能应用到我的html页面，但直到现在都没有结果。我有三行，他们都有一个删除按钮，我想创建一个效果，当您单击删除按钮时，整个行块消失。任何帮助都将深表感谢。
HTML
<div class="row deletedRow">
<div class="col1">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="../stylesheets/shore-excursions/images/background/photo1.jpg" alt="" height="124" width="155" /></td>
<td>
<h3>Velit mauris scelerisque risus lorem vatis</h3>
<p>Grand Cayman, Cayman Islands</p>
<ul>
<li>Duration 3.5 hours</li>
<li>Ages 8 & Up</li>
<li>Moderate Activity
<span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" />
<div>
<span class="arrow"></span>
<p class="red">Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor sit nostrud mas consectetur </p>
</div>
</span>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col2">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="with-border">
<p>Adults:</p><p class="red">$100</p>
</td>
</tr>
<tr>
<td>
<p>Children:</p><p class="red">$60</p>
</td>
</tr>
<tr>
<td>
<p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p>
</td>
</tr>
<tr>
<td>
<a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row deletedRow">
<div class="col1">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="../stylesheets/shore-excursions/images/background/photo2.jpg" alt="" height="124" width="155" /></td>
<td>
<h3>Velit mauris scelerisque risus lorem vatis</h3>
<p>Grand Cayman, Cayman Islands</p>
<ul>
<li>Duration 3.5 hours</li>
<li>Ages 7 & Up</li>
<li>Moderate Activity
<span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" />
<div>
<span class="arrow"></span>
<p class="red">Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor sit nostrud mas consectetur </p>
</div>
</span>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col2">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="with-border">
<p>Adults:</p><p class="red">$100</p>
</td>
</tr>
<tr>
<td>
<p>Children:</p><p class="red">$60</p>
</td>
</tr>
<tr>
<td>
<p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p>
</td>
</tr>
<tr>
<td>
<a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col1">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="../stylesheets/shore-excursions/images/background/photo3.jpg" alt="" height="124" width="155" /></td>
<td>
<h3>Velit mauris scelerisque risus lorem vatis</h3>
<p>Grand Cayman, Cayman Islands</p>
<ul>
<li>Duration 3.5 hours</li>
<li>Ages 7 & Up</li>
<li>Moderate Activity
<span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" />
<div>
<span class="arrow"></span>
<p class="red">Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor sit nostrud mas consectetur </p>
</div>
</span>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" /></a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col2">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="with-border">
<p>Adults:</p><p class="red">$100</p>
</td>
</tr>
<tr>
<td>
<p>Children:</p><p class="red">$60</p>
</td>
</tr>
<tr>
<td>
<p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p>
</td>
</tr>
<tr>
<td>
<a href="#" class="removeRow"><img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" /></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" /></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
提前谢谢！
答案 0 :(得分：3)
您可以使用.closest()将父母爬上class="row" <div>，如下所示：
$(".removeRow").click(function() {
$(this).closest("div.row").remove();
});
答案 1 :(得分：1)
这是一个我做的JSFiddle，它基本上做了一个循环，它将向上走DOM树，直到它找到具有类“row”或主体的父节点。如果找到具有该类的节点，它将删除它，否则不会删除任何内容。