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

Question

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

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

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，它将附加到<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> 项目？还有没有更简单的方法来完成整个过程而我只是没有看到它？

感谢您的宝贵时间。

编辑

按要求拨弄here

我能解释的最简单的方法。

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

现在没有

Answer 1

在简化检查的过程中，我使用了您的 JSFiddle 并执行了以下操作：

• 删除了额外的 console.log 和 cmets
• 删除了与 cookie 的交互（因为我一开始没有它们，所以我认为它们不会只是第一个场景）

这样做之后，我达到了一个点（你可以看到它here），所需的功能可以正常工作。

我什至继续删除了 ajax 的东西，因为那个警报快把我逼疯了。 (here)

由于这工作正常，我猜你的问题在于我删除的行之间。

您对cookies的使用如下：

1. 加载现有选项卡并重新添加它们
2. 保存account_id和title，不再使用回来
3. 在添加新项目后保留 listItems

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

这清楚地表明 Fiddle 中存在的问题是 jQuery.cookie 不存在，因此这些调用正在停止执行脚本的其余部分。这也解释了为什么当我把它们拿出来时它才开始工作。

我发布了我如何到达那里的整个过程，以表明我如何将问题缩小到特定部分，这对于减少问题空间很有用。当您没有选择并在迷路时到达某个地方时，使用更少的代码和您已确定的问题的特定部分发布问题会更容易。这将帮助您找到您面临的问题，并帮助 StackOverflow 为您的问题提供正确的答案。

希望对你有帮助！

Answer 2

这是我想出的解决方案。人们应该比我原来的帖子更容易理解。虽然读起来很长，但它可能是值得的，尤其是对于新开发者而言。

这段代码的重点是从无序列表或<ul> 中创建一个菜单栏。菜单栏需要在多个页面上使用。所以我将使用cookies。

我从这段代码开始从我的表中获取一个文本值。：

$('.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();
});

然后我将值放入一个数组中。我这样做 only 如果数组中还没有这个字符串。我不想重复：

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

然后我将数组存储到 cookie 中，使用 library 如下：

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

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

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

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

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 甚至没有接近我的强项。

完整代码可以在here找到。