javascript - 当单击另一个 anchor 标记时，从 anchor 标记获取字符串值

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