Удаление divs с jquery

Question

Я пытаюсь применить функцию remove к моей странице 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>   

Спасибо заранее!

Answer 1

Вы можете использовать .closest() подняться родителей к вашему class="row"<div>, как это:

$(".removeRow").click(function() { 
    $(this).closest("div.row").remove(); 
}); 

Answer 2

Вот JSFiddle я сделал, что в принципе делает петлю, которая будет идти вверх по дереву DOM, пока он не найдет родительский узел, который имеет класс «строка» или тело. Если узел с классом найден, он удалит его, иначе ничего не будет удалено.

JSFiddle Example