получить строковое значение из тега привязки при нажатии на другой тег привязки

0

У меня есть <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, поскольку они добавлены, но я не против того, чтобы каким-то образом добавить класс, который позволит мне ссылаться на них.

Любые идеи приветствуются, и я уверен, что это, вероятно, довольно просто, но я собираюсь назвать это уходом за день, и я не могу, чтобы жизнь меня обернулась вокруг этого прямо сейчас.

  • 1
    removeTab.call(this)
  • 0
    @PSL спасибо, реальная проблема - значение String из другого тега <a> . Есть идеи?
Показать ещё 2 комментария
Теги:

2 ответа

4
Лучший ответ

Используйте 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();
});
Поделиться
  • 0
    теперь это очень красивый код. спасибо +1
  • 1
    +1 Думаю, я бы предпочел $.inArray() Array.indexOf() из-за IE :(
Показать ещё 3 комментария
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();
}

Демо: скрипка

или используйте .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();
}

Демо: скрипка

Поделиться
  • 0
    И снова ты помогаешь мне. Большое спасибо, сэр. Это прекрасно работает
  • 0
    @i_me_mine также было несколько выпущенных связанных селекторов, которые также исправлены

Ещё вопросы

Сообщество Overcoder
Наверх
Меню