The message "The property list is empty." after deleting all the properties in the list, I cannot understand the reason, although I wrote everything I needed in the code:

$(".delete_1").click(function() { $(".list__item_1").remove() }); $(".delete_2").click(function() { $(".list__item_2").remove() }); $(".delete_3").click(function() { $(".list__item_3").remove() }); if ($(".list__item").length == 0) { $(".list__without_item").css("display", "block"); } else if ($(".list__item").length > 0) { $(".list__without_item").css("display", "none"); }; 
 .list__item { max-width: 250px; position: relative; padding: 10px; border-radius: 5px; background: #f4f4f4; color: #000; margin-bottom: 3px; } .list__item_close { position: absolute; top: 0; left: 100%; width: 70px; height: 20px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list__favors"> <p class="list__without_item">小锌懈褋芯泻 褋胁芯泄褋褌胁 锌褍褋褌.</p> <div class="list__item list__item_1"> <div class="list__item_close delete_1">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 1 </div> <div class="list__item list__item_2"> <div class="list__item_close delete_2">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 2 </div> <div class="list__item list__item_3"> <div class="list__item_close delete_3">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 3 </div> </div>

  • Uncaught SyntaxError: missing) after argument list - Grundy
  • Check $(".list__item").length === 0 in the handler when deleting a list item. And so you check only once during the execution of the script. - Doigrales

3 answers 3

Perhaps in your code everything is different than in this example, but specifically here your condition hangs incomprehensibly where it is executed not at the moment when you remove the elements, but before your handlers work. Be prudent, write one handler to delete, trigite your own list cheng in it, check the conditions on the list, and if the list is empty, show the message.

 var $list = $('.list__favors'); $list.on('click', '.list__item_close', function() { $(this).parent().remove(); $list.trigger('change'); }); $list.on('change', function() { var $message = $list.find('.list__without_item'); if ($list.find('.list__item').length > 0) { $message.hide(); } else { $message.show(); } }); 
 .list__item { max-width: 250px; position: relative; padding: 10px; border-radius: 5px; background: #f4f4f4; color: #000; margin-bottom: 3px; } .list__item_close { position: absolute; top: 0; left: 100%; width: 70px; height: 20px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list__favors"> <p class="list__without_item">小锌懈褋芯泻 褋胁芯泄褋褌胁 锌褍褋褌.</p> <div class="list__item list__item_1"> <div class="list__item_close delete_1">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 1 </div> <div class="list__item list__item_2"> <div class="list__item_close delete_2">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 2 </div> <div class="list__item list__item_3"> <div class="list__item_close delete_3">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 3 </div> </div>

    Slightly improved the code.

     $('.delete').on('click', (e) => { $(e.target).parent().remove(); isEmpty(); }); var isEmpty = () => { if ($('.list__favors .list__item').length === 0) { $('.list__without_item').css('display', 'block'); } else { $('.list__without_item').css('display', 'none'); } }; isEmpty(); 
     .list__item { max-width: 250px; position: relative; padding: 10px; border-radius: 5px; background: #f4f4f4; color: #000; margin-bottom: 3px; } .list__item_close { position: absolute; top: 0; left: 100%; width: 70px; height: 20px; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list__favors"> <p class="list__without_item">小锌懈褋芯泻 褋胁芯泄褋褌胁 锌褍褋褌.</p> <div class="list__item list__item_1"> <div class="list__item_close delete">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 1 </div> <div class="list__item list__item_2"> <div class="list__item_close delete">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 2 </div> <div class="list__item list__item_3"> <div class="list__item_close delete">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 3 </div> </div> 

       let isEmpty = () => { if ($(".list__item").length == 0) { $(".list__without_item").css("display", "block"); } else if ($(".list__item").length > 0) { $(".list__without_item").css("display", "none"); }; } isEmpty(); $(".delete_1").click(function() { $(".list__item_1").remove(); isEmpty(); }); $(".delete_2").click(function() { $(".list__item_2").remove(); isEmpty(); }); $(".delete_3").click(function() { $(".list__item_3").remove(); isEmpty(); }); 
       .list__item { max-width: 250px; position: relative; padding: 10px; border-radius: 5px; background: #f4f4f4; color: #000; margin-bottom: 3px; } .list__item_close { position: absolute; top: 0; left: 100%; width: 70px; height: 20px; } 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list__favors"> <p class="list__without_item">小锌懈褋芯泻 褋胁芯泄褋褌胁 锌褍褋褌.</p> <div class="list__item list__item_1"> <div class="list__item_close delete_1">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 1 </div> <div class="list__item list__item_2"> <div class="list__item_close delete_2">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 2 </div> <div class="list__item list__item_3"> <div class="list__item_close delete_3">校写邪谢懈褌褜</div> 小胁芯泄褋褌胁芯 3 </div> </div>