Question

我有<ul>动态添加<li>，同时还在数组中存储字符串。当我单击“删除”图像时，我需要删除数组中的<li>和字符串。

这就是我在<ul>和我的数组中添加字符串的方式：

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

var found = jQuery.inArray(title, titles);
    if (found >= 0) {       

    } else {        
        titles.push(title);
        addTab();
    }

这就是我试图删除它们的方式：

$("body").on("click", ".deleteImage", function(e) {
    removeItem = $(this).closest('li a').text();
    console.log(removeItem);
    titles = jQuery.grep(titles, function(value) {
      return value != removeItem;
    });
    removeTab();
});    

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

我可以添加<li>和字符串值，但是当我尝试删除它们时，没有任何反应。事件从点击侦听器触发;但是，未设置removeItem变量且未删除<li>。

我想避免给每个<a>添加一个id，但是我不反对以某种方式添加一个允许我引用它们的类。

任何想法都是受欢迎的，我相信这可能相当简单，但是我打算把它称为退出当天，我现在不能把它包围起来。

Answer 1

使用DOM;这很神奇。也是真正的参数，因为全局变量不是传递参数的适当方式。

var titles = [];

function addTab(title) {
    var newTab = $("<li>", { "class": "navHighlight" });

    newTab.append($("<a>", { href: "#", text: title }));
    newTab.append($("<img>", { src: "images/delete.png", "class": "deleteImage" }));
    newTab.data("title", title);

    newTab.appendTo(tabs);
    titles.push(newTab[0]);
}

$("body").on("click", ".deleteImage", function(e) {
    var remove = $(this).closest("li");

    titles.splice(titles.indexOf(remove[0]), 1);
    remove.remove();
});

Answer 2

this内的

removeTab未引用delete元素

$("body").on("click", ".deleteImage", function (e) {
    var removeItem = $(this).closest('li').find('a').text();
    console.log(removeItem);
    titles = jQuery.grep(titles, function (value) {
        return value != removeItem;
    });
    removeTab(this);
});

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

演示：Fiddle

或使用.call()将自定义执行上下文传递给removeTab方法

$("body").on("click", ".deleteImage", function (e) {
    removeItem = $(this).closest('li').find('a').text();
    console.log(removeItem);
    titles = jQuery.grep(titles, function (value) {
        return value != removeItem;
    });
    console.log(titles)
    removeTab.call(this);
});

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

演示：Fiddle

单击另一个锚标记时，从锚标记获取字符串值

2 个答案: