Removing divs with jquery
I have been trying to apply the remove function to my html page but with no result until now. I have three rows and they all have a remove button, I would like to create an effect that when you click on the remove button the whole row block disappears. Any help would be deeply appreciated.
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>
开发者_如何学Python <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>
Thank you in advance!
You can use .closest() to climb up the parents to your class="row" <div>, like this:
$(".removeRow").click(function() {
$(this).closest("div.row").remove();
});
Here is a JSFiddle I made that basically does a loop that will walk up the DOM tree until it finds the parent node that has the class "row" or the body. If the node with the class is found it will remove it otherwise nothing is removed.
JSFiddle Example
加载中,请稍侯......
精彩评论