删除整个表并在正文的最后一行删除JQuery之后更改h1的文本

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语句？ 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>

Answer 1

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. 您在CodePen中使用的JS不太正确，但是根本不做任何事情的原因之一是因为您在HTML编辑窗格中包含了完整的HTML标记。 You are only supposed to add the code that goes between the <body></body> tags. 您只应添加<body></body>标记之间的代码。 You can add jQuery in the pen's settings. 您可以在笔的设置中添加jQuery。

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. 您可以使用.closest()从“删除”按钮上遍历树，找到最近的tr和最近的table以找出应删除的内容。

From there, here is what we do: 从那里开始，我们要做的是：

When clicking delete, find the nearest row, and fade it out 单击删除时，找到最近的行，然后淡出
Check the number of rows in the table 检查表中的行数
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. 使用setTimeout函数，在淡入淡出动画完成之后，删除最近的一行或整个表格，具体取决于表格中是否剩余一行。

$(".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>

删除整个表并在正文的最后一行删除JQuery之后更改h1的文本

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-08-23 17:33:48

删除整个表并在正文的最后一行删除JQuery之后更改h1的文本

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-08-23 17:33:48

解决方案1
0 已采纳 2017-08-23 17:33:48