返回相同数量元素的jQuery已被删除

jQuery returning the same number of elements has been deleted

本文关键字:jQuery 删除 元素 返回      更新时间:2023-09-26

下面有一个函数,它执行ajax post从DB中删除一行,在ajax成功后,它将隐藏实际元素。

这是我遇到的问题:

假设我的页面上有5个元素。在成功的$.post()之后,它隐藏了一个元素,现在页面上有4个元素。现在,当我用类.delete_items点击删除链接时,它仍然返回5个元素作为.length,而不是控制台日志中的4个。无论我点击了多少次删除按钮,它都会不断返回5。

我检查了我的代码几次,似乎不明白为什么它返回相同的数字。

如有任何帮助,我们将不胜感激。下面是我的代码

    var menuType = "baseMenu"; //Set global var
    function countElements(ajax_item_key, ajax_item_val, item_input_class, ajax_cat_key, cat_id){

            //This deletes the item only
            o[ajax_item_key] = ajax_item_val;

              /* @var count_all_item_inputs
Count all the input fields that has that has a class name of the passed param
              item_input_class. Filter the selection with by choosing only the classes with the passed in cat_id
             Example of an actual HTML item_input :
             <input class="menu_item_input 2704" type="text" value="Test" name="items_and_prices[21518][]"> */
            var count_all_item_inputs = $(item_input_class+'[class*="'+cat_id+'"]').length;
            console.log(count_all_item_inputs); // This keep returning the same value??
            //This deletes item and category if there was one input left to be deleted
            if(count_all_item_inputs == 1) {
                o[ajax_cat_key] = ajax_cat_val;
                 var hide_category = true;
                return hide_category;
            }

    }
    $(.delete_item).on("click",   function(){
            if(menuType === "baseMenu") {
                /*
                @baseMenuId - key to send at the ajax post
                @id - value defined in my script didn't include it on this example to make things simple
                @.menu_item_input input class to pass in so that it will count how many inputs are left after a successful jquery post
                @deleteAllFromBaseMenu - Another jquery key to  send if a condition is met inside the countElement function
                @cat_id - The category id to send alongside with the deleteAllFromBaseMenu
               */
                var hide_category = countElements("baseMenuId", id, ".menu_item_input","deleteAllFromBaseMenu", cat_id);
    });
     $.post("../../include/functions/menuDisplay/MenuCrud/menuDelete.php", o)
                .fail(function(){
                    //console.log("deletion failed");
                })
                .done(function(){
                    $("div#"+id).hide();
                   if(hide_category == true){
                       $("div#"+cat_id).hide();
                   }
                });
                return false;
        } else {
            return false;
        }

您正在计算与选择器匹配的所有元素,即使您隐藏了这些元素,也没有删除它,因此它们仍然占总数。您可以通过添加过滤器:visible来修改选择器,以便只获取可见元素。

例如,对于下面的html,如果我们使用选择器$("div:visible"),我们将只获得第二个div,而如果我们只使用$("div"),我们将同时针对这两个div。

<div style='display:none'>A</div>
<div>B</div>

注意要使:visible过滤器按预期工作,元素需要在文档中占用一些空间,换句话说,如果它是空的,即使不一定是隐藏的,它也不算数。

如果你检查$('*').length,然后使用.remove()而不是.hide(),然后检查$('*').length并预处理简单的数学,我想你已经得到了,除非还有其他我没有注意到的问题。