stackoom
  简体   繁体   中英

Delete the whole table and change text of h1 after last row of the body deleted JQuery

 原文  2017-08-23 15:46:47  3   1    javascript/ jquery

Question

I want to remove the whole table when a delete button in the table's last row is clicked, but nothing works. Should I use a loop or if statement? If so, then where? Or what anonymous function should be declared and then checked if there is any row in the table?

Here's what I have so far: 

$(".delete").on("click", function() {
    $(this).parent().parent().fadeOut(500, function(){
    $(this).remove()});
});

This is for a cart in a web store. Users delete some goods from cart, and when it's empty, I'd like it to show "Your cart is empty" without an empty table.

Full code: 

 $(".delete").on("click", function() { $(this).parent().parent().fadeOut(500, function(){ $(this).remove()}); }); 
 body { width: 100%; max-width: 1080px; } h1 { margin-left: 75px; margin-top: 60px; font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 30px; color: rgba(73, 73, 73, 255); text-align: left; font-weight: normal; } input { width: 63px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-bottom: 1px solid gray; border-right: 1px solid gray; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; } th { font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 16px; color: rgba(144, 144, 144, 255); text-align: left; padding: 0px 30px 13px 20px; font-weight: normal; outline: none; } table { border-collapse: collapse; width: 100%; } td { padding: 20px; vertical-align: top; padding-top: 40px; } tbody { border: 1.5px solid gray; } tfoot { font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 20px; color: rgba(51, 51, 51, 255); text-align: right; } tfoot>tr { border: none; } tr { border-bottom: 0.5px solid gray; } p { margin: 10px 0; } .delete { border: none; outline: inherit; background: inherit; padding-left: 0; color: rgba(50, 96, 181, 255); font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 16px; } .delete:hover { font-weight: bolder; } .price-amount { width: 89%; height: 36%; margin: 17px auto; padding-bottom: 56px; overflow: auto; } .extra { border-collapse: separate; border-spacing: 0px; } .extra tr:first-child td { border-bottom: 0.5px solid gray; } .image { width: 130px; } .name { font-family: 'OpenSans-Bold', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 18px; color: rgba(50, 96, 181, 255); text-align: left; font-weight: bold; } .manufactura { font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 18px; color: rgba(51, 51, 51, 255); text-align: left; } .kat { font-family: OpenSans, AdobeInvisFont, MyriadPro-Regular; font-size: 18px; color: rgba(144, 144, 144, 255); text-align: left; } .add { background: yellow; font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 16px; color: rgba(51, 51, 51, 255); text-align: center; border-radius: 5px; } .price { font-family: 'OpenSans-Bold', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 18px; color: rgba(148, 34, 34, 255); text-align: left; font-weight: 600; } @media(max-width: 640px) { .name, .manufactura, .kat { font-size: 14px; } .extra { border-collapse: collapse; } h1 { margin-left: 20px; font-size: 20px; } td { padding: 10px; border-right: 1px solid gray; border-left: 1px solid gray; } td:first-of-type, th:first-of-type { display: none; } tfoot>tr { background: green; color: white; border-bottom: 1px solid gray; } } 
 <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> </head> <body> <h1 id="cartTitle">Спиcок покупок</h1> <div class="price-amount"> <table id="cart"> <thead> <th></th> <th></th> <th id="price">Цена</th> <th id="amount">Количество</th> </thead> <tbody> <tr> <td class="image"><img src="hair_clipper.jpg" alt=""></td> <td><span class="name">Машинка для стрижки детских волос<br> Ramill Baby Hair Clipper BHC330</span><br> <p><span class="manufactura">Производитель X</span><br> <span class="kat">Категория 1 > Категория 1.2 > Категория 1.3</span> </p> <button class="delete">Удалить</button> </td> <td class="price">2499 руб.</td> <td><input type="number" value="5"></td> </tr> <tr> <td class="image"><img src="baby_skyler.jpg" alt=""></td> <td><span class="name">Автокресло<br> Happy Baby Skyler</span> <p><span class="manufactura">Производитель Y</span><br> <span class="kat">Категория 2 > Категория 2.2 > Категория 2.3.5</span> </p> <button class="delete">Удалить</button> </td> <td class="price">18450 руб.</td> <td><input type="number" value="1"></td> </tr> </tbody> <tfoot> <tr> <td></td> <td colspan="3">Итого: 100500 руб.</td> </tr> </tfoot> </table> </div> <h1>Список товаров</h1> <div class="price-amount"> <table class="extra"> <thead> <th></th> <th></th> <th>Цена</th> <th>Количество</th> </thead> <tbody> <tr> <td class="image"><img src="chico.jpg" alt=""></td> <td><span class="name">Погремушка-прорезыватель "жираф"<br> Chicco</span><br> <p><span class="manufactura">Производитель A</span><br> <span class="kat">Категория 3 > Категория 3.3 > Категория 3.2.1</span> </p> <button class="add">В корзину</button> </td> <td class="price">250 руб.</td> <td><input type="number" value="1"></td> </tr> <tr> <td class="image"><img src="smart_cam.jpg" alt=""></td> <td><span class="name">Wi-Fi видеоняня<br> Samsung SmartCam SNH-V6410PNW</span><br> <p><span class="manufactura">Производитель B</span><br> <span class="kat">Категория 2 > Категория 2.2 > Категория 2.3.5</span> </p> <button class="add">В корзину</button> </td> <td class="price">13999 руб.</td> <td><input type="number" value="1"></td> </tr> </tbody> </table> </div> <script rel="tex/javascript" src="cart.js"></script> </body> </html>

1 answers

solution1
 0 ACCPTED  2017-08-23 17:33:48

The JS you had going in your CodePen wasn't quite right, but one of the reasons it wasn't doing anything at all is because you had included the full HTML markup in the HTML edit pane. You are only supposed to add the code that goes between the <body></body> tags. You can add jQuery in the pen's settings.

Once we get the clicks actually registering by fixing that issue, we can worry about the code.

You can use .closest() to traverse up the tree from the delete button and find the nearest tr and nearest table to figure out what should be deleted.

From there, here is what we do:

  1. When clicking delete, find the nearest row, and fade it out
  2. Check the number of rows in the table
  3. Using a setTimeout function, delete either the nearest row or the entire table after the fade animation has completed, depending on if there is more than one row left in the table or not. 

$(".delete").on("click", function() {
  var thisRow = $(this).closest('tr');
  var thisTable = $(this).closest('table');
  var numRows = $(thisTable).find('tbody tr').length;

  $(thisRow).fadeOut(500);

  setTimeout(function(){
    if(numRows === 1) {
      $(thisTable).remove();
    } else {
      $(thisRow).remove();
    }
    //insert 'Your cart is empty' message here
  }, 510);

});


 $(".delete").on("click", function() { var thisRow = $(this).closest('tr'); var thisTable = $(this).closest('table'); var numRows = $(thisTable).find('tbody tr').length; $(thisRow).fadeOut(500); setTimeout(function(){ $(thisRow).remove(); }, 510); if(numRows === 1) { setTimeout(function(){ $(thisTable).remove(); }, 510); //insert 'Your cart is empty' message here } }); 
 body { width: 100%; max-width: 1080px; } h1 { margin-left: 75px; margin-top: 60px; font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 30px; color: rgba(73, 73, 73, 255); text-align: left; font-weight: normal; } input { width: 63px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-bottom: 1px solid gray; border-right: 1px solid gray; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; } th { font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 16px; color: rgba(144, 144, 144, 255); text-align: left; padding: 0px 30px 13px 20px; font-weight: normal; outline: none; } table { border-collapse: collapse; width: 100%; } td { padding: 20px; vertical-align: top; padding-top: 40px; } tbody { border: 1.5px solid gray; } tfoot { font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 20px; color: rgba(51, 51, 51, 255); text-align: right; } tfoot>tr { border: none; } tr { border-bottom: 0.5px solid gray; } p { margin: 10px 0; } .delete { border: none; outline: inherit; background: inherit; padding-left: 0; color: rgba(50, 96, 181, 255); font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 16px; } .delete:hover { font-weight: bolder; } .price-amount { width: 89%; height: 36%; margin: 17px auto; padding-bottom: 56px; overflow: auto; } .extra { border-collapse: separate; border-spacing: 0px; } .extra tr:first-child td { border-bottom: 0.5px solid gray; } .image { width: 130px; } .name { font-family: 'OpenSans-Bold', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 18px; color: rgba(50, 96, 181, 255); text-align: left; font-weight: bold; } .manufactura { font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 18px; color: rgba(51, 51, 51, 255); text-align: left; } .kat { font-family: OpenSans, AdobeInvisFont, MyriadPro-Regular; font-size: 18px; color: rgba(144, 144, 144, 255); text-align: left; } .add { background: yellow; font-family: 'OpenSans', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 16px; color: rgba(51, 51, 51, 255); text-align: center; border-radius: 5px; } .price { font-family: 'OpenSans-Bold', 'AdobeInvisFont', 'MyriadPro-Regular', sans-serif; font-size: 18px; color: rgba(148, 34, 34, 255); text-align: left; font-weight: 600; } @media(max-width: 640px) { .name, .manufactura, .kat { font-size: 14px; } .extra { border-collapse: collapse; } h1 { margin-left: 20px; font-size: 20px; } td { padding: 10px; border-right: 1px solid gray; border-left: 1px solid gray; } td:first-of-type, th:first-of-type { display: none; } tfoot>tr { background: green; color: white; border-bottom: 1px solid gray; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 id="cartTitle">Спиcок покупок</h1> <div class="price-amount"> <table id="cart"> <thead> <th></th> <th></th> <th id="price">Цена</th> <th id="amount">Количество</th> </thead> <tbody> <tr> <td class="image"><img src="hair_clipper.jpg" alt=""></td> <td><span class="name">Машинка для стрижки детских волос<br> Ramill Baby Hair Clipper BHC330</span><br> <p><span class="manufactura">Производитель X</span><br> <span class="kat">Категория 1 > Категория 1.2 > Категория 1.3</span> </p> <button class="delete">Удалить</button> </td> <td class="price">2499 руб.</td> <td><input type="number" value="5"></td> </tr> <tr> <td class="image"><img src="baby_skyler.jpg" alt=""></td> <td><span class="name">Автокресло<br> Happy Baby Skyler</span> <p><span class="manufactura">Производитель Y</span><br> <span class="kat">Категория 2 > Категория 2.2 > Категория 2.3.5</span> </p> <button class="delete">Удалить</button> </td> <td class="price">18450 руб.</td> <td><input type="number" value="1"></td> </tr> </tbody> <tfoot> <tr> <td></td> <td colspan="3">Итого: 100500 руб.</td> </tr> </tfoot> </table> </div> <h1>Список товаров</h1> <div class="price-amount"> <table class="extra"> <thead> <th></th> <th></th> <th>Цена</th> <th>Количество</th> </thead> <tbody> <tr> <td class="image"><img src="chico.jpg" alt=""></td> <td><span class="name">Погремушка-прорезыватель "жираф"<br> Chicco</span><br> <p><span class="manufactura">Производитель A</span><br> <span class="kat">Категория 3 > Категория 3.3 > Категория 3.2.1</span> </p> <button class="add">В корзину</button> </td> <td class="price">250 руб.</td> <td><input type="number" value="1"></td> </tr> <tr> <td class="image"><img src="smart_cam.jpg" alt=""></td> <td><span class="name">Wi-Fi видеоняня<br> Samsung SmartCam SNH-V6410PNW</span><br> <p><span class="manufactura">Производитель B</span><br> <span class="kat">Категория 2 > Категория 2.2 > Категория 2.3.5</span> </p> <button class="add">В корзину</button> </td> <td class="price">13999 руб.</td> <td><input type="number" value="1"></td> </tr> </tbody> </table> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Change text to h1 with jquery? Change text in H1 after click on tab Javascript Changing text of a h1 with jquery,, Change text of <h1> if screen is reduced How to prompt to change text of an h1 box How to change text in H1 tag? Change H1 content to lowercase with jquery Change H1 Style On Click (Javascript/Jquery) jQuery remove text from h1 Jquery not fetching 'h1' from text
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM