jQuery-使用删除图像从数组中删除li

Question

我试图制作一个可以添加和删除<li>元素的菜单栏。 到目前为止，一切都很好，但是当我尝试删除它们时，我遇到了问题。 我已经玩了几个小时，现在我想知道是否可以简化整个过程（也许是一个对象？）。

无论如何，这是完整的代码（80行），后面还有注释。

var tabs = $('.accountSelectNav');
var titles = [];
var listItems = [];
// when the page loads check if tabs need to be added to the ul (menu bar)
$(document).ready(function(e) {
    if ($.cookie('listItems') != null) {
        console.log('not null');
            //return "listItems" to it's array form.
        listItems = JSON.parse($.cookie('listItems'));
        $('.accountSelectNav').append(listItems);
    }
});

$('.selectTable td:first-child').on('click', function(e) {
    $('#home_select').removeClass('navHighlight');
    //grab the text value of this cell
    title = $(this).text();
    $.ajax({
        url:'core/functions/getAccountId.php',
        type: 'post',
        data: {'title' : title}
    }).fail (function() {
        alert('error');
    }).done(function(data) {
        accountId = $.trim(data);
        // store values in the cookie
        $.cookie('account_id', accountId, {expires : 7});
        $.cookie('title', title, {expires : 7});
        window.location = ('home_table.php');
    });

    // make sure the value is NOT currently in the array. Then add it 
    var found = jQuery.inArray(title, titles);
    if (found == -1) {
        titles.push(title);
        addTab();
    }

    // make sure the value is NOT currently in the array. Then add it
    found = jQuery.inArray(title, listItems);
    if (found == -1) {
        addListItem();
        //place <li>'s in cookie so they may be used on multiple pages
        $.cookie('listItems', JSON.stringify(listItems));
    };
});

$("body").on("click", ".deleteImage", function (e) {
    var removeTitle = $(this).closest('li').find('a').text();
    var removeItem = $(this).closest('li')[0].outerHTML;

    //remove title from "titles" array
    titles = jQuery.grep(titles, function (value) {
        return value != removeTitle;
    });
    //remove <li> from "listItems" array
    listItems = jQuery.grep(listItems, function (value) {
        return value != removeItem;
    });
    // this shows the <li> is still in the listItemsarray
    console.log(listItems); 
    // put the array back in the cookie
    $.cookie('listItems', JSON.stringify(listItems));
    removeTab(this);
});

$("body").on("mouseover", ".accountSelectNav li", function(e) {
    $(this).find('.deleteImage').show();
});

$("body").on("mouseleave", ".accountSelectNav li", function(e) {
    $(this).find('.deleteImage').hide();
});

function addTab() {
    tabs.append('<li class="navHighlight">' + '<a href="#">' + title + '</a>' + '<a href="#">' + '<img src="images/delete.png" class="deleteImage"/>' + '</a>' + '</li>');
};

function removeTab(del) {
    $(del).closest('li').remove();
}

function addListItem() {
    var s = ('<li class="navHighlight">' + '<a href="#">' + title + '</a>' + '<a href="#">' + '<img src="images/delete.png" class="deleteImage"/>' + '</a>' + '</li>');
    listItems.push(s);
}

因此，您看到我有两个长度相等的数组，它们应该始终是相同的长度。 一个存储要显示在选项卡中的标题，另一个存储<li>的html，该html将追加到<ul> 。 我没有从其数组中删除标题的问题。 但是，从数组中删除<li>变得很麻烦。 您会看到当<li>元素膨胀后得到的内容，其中的html与输入的内容不完全匹配，浏览器添加了样式元素。

例如，变量“ removeItem”代表希望删除的所选<li>的html值。 看起来像这样：

<li class="navHighlight"><a href="#">Test1</a><a href="#"><img src="images/delete.png" class="deleteImage" style="display: inline;"></a></li> 

但是我的数组“ listItems”中的值看起来像这样：

<li class="navHighlight"><a href="#">Test1</a><a href="#"><img src="images/delete.png" class="deleteImage"/></a></li> 

因此，我尝试将其从数组中删除的尝试始终失败，因为它们并不是完美的匹配。

现在我的问题是如何删除该<li>项？ 还有没有更简单的方法可以完成整个过程，而我只是没有看到它？

谢谢你的时间。

编辑

小提琴被要求在这里

我可以解释的最简单方法。

单击小提琴的链接。
单击“应用程序名称”列中的任何单元格
这会将<li>添加到表格上方的<ul> （菜单）中
将鼠标悬停在<li>出现图片
点击图片
这应该从<ul>和数组listItems中删除<li> 。

现在没有

Answer 1

在使此操作易于检查的过程中，我采用了您的JSFiddle并执行了以下操作：

• 删除了多余的console.log和注释
• 删除了与cookie的交互（因为我一开始就没有它们，所以我发现它们不只是第一个场景）

这样做之后，我到达了所需功能可以正常工作的地方（您可以在此处看到）。

我什至继续删除了ajax的内容，因为该警报使我发疯。 （ 这里 ）

既然可以正常工作，我想您的问题就在我删除的两行之间。

您对Cookie的用法如下：

1. 加载现有标签并再次添加它们
2. 保存account_id和title ，不再使用
3. 在添加新项目后保留listItems

然后，我用您的小提琴版本打开了控制台，javascript的执行在$.cookie()处停止，错误undefined is not a function 。

这清楚地表明，小提琴中存在的问题是不存在jQuery.cookie，因此这些调用使其余脚本的执行停止。 这也解释了为什么当我取出它们时它才开始起作用。

我张贴了到达那里的全过程，以指示如何将问题缩小为特定部分，这对于减少问题空间很有用。 当您失去选择并且迷路时到达某个地方时，可以用更少的代码和所确定问题的特定部分来发布问题。 这将帮助您找到所面临的问题，并帮助StackOverflow为您的问题提供正确的答案。

希望能帮助到你！

Answer 2

这是我想出的解决方案。 人们应该比我原来的帖子更容易理解。 尽管读了很长的书，但值得，特别是对于新开发人员。

该代码的目的是使菜单栏脱离无序列表或<ul> 。 菜单栏需要在多个页面上使用。 因此，我将使用Cookie。

我从此代码开始，以从表中获取文本值：

$('.selectTable td:first-child').on('click', function(e) {
    // This value will be used later for the name of the tab or `<li>` inside our menu bar or `<ul>`
    title = $(this).text();
});

然后，将值放在数组中。 仅当数组内部没有此字符串时，我才这样做。 我不希望重复：

var found = jQuery.inArray(title, titles);
var titles = [];
if (found == -1) {
    titles.push(title);
}

然后，使用类似的库将数组存储到cookie中：

$.cookie('titles', JSON.stringify(titles));

现在，当任何需要此菜单栏的页面加载时，我运行以下代码来检查是否有任何值：

$(document).ready(function() {
    if ($.cookie('titles') != null) {
        titles = JSON.parse($.cookie('titles'));
    }
});

现在，我需要遍历数组。 当我遍历数组时，我必须做三件事：

1）抓取字符串值。
2）将html添加到我的新字符串中，使其成为列表项或<li> 。
3）将新创建的<li>追加到我们的<ul> 。

像这样：

for(var i = 0; i < titles.length; i++) {
    var str = titles[i];
    var listItem = '<li class="navHighlight">' 
                    + '<a href="#">' 
                    + str 
                    + '</a>' 
                    + '<a href="#">' 
                    + '<img src="images/delete.png" class="deleteImage"/>' 
                    + '</a>' 
                    + '</li>';
    $('.accountSelectNav').append(listItem);
}

现在，如果要删除此<li> ，请单击在<li>内部找到的删除图像。 您说什么删除图片？ 看看我再次添加的html 。 您将看到我在其中添加<img>标签。

现在像这样删除：

$("body").on("click", ".deleteImage", function (e) {
    // grabs the text value of my li, which I want to remove
    var removeTitle = $(this).closest('li').find('a').text();
    // runs through my titles array and returns an array without the value above
    titles = jQuery.grep(titles, function (value) {
        return value != removeTitle;
    });
});

然后，我只需将新数组再次放入Cookie中即可。 像这样：

$.cookie('titles', JSON.stringify(titles));

最后，我像这样删除选项卡：

removeTab(this);

function removeTab(del) {
    $(del).closest('li').remove();
}

是的，我完成了。 所以现在，如果有人能以更优雅的方式完成此任务，我在听。 我毫不怀疑有更好的方法，javascript / jQuery甚至都不接近我的强项。

完整的代码可以在这里找到。