更新

Question

我正在尝试像SO一样创建一个标记系统。我添加了标签，现在我想删除它们。

MyQuestion：

如何删除附加的标签？
如何使十字按钮（跨度）看起来与SO标记系统中的相同？

var tags = [];
$("#textBox").keypress(function (e) {
    if (e.which === 13) {
        $(".target").append("<a href='#' class='tag' >"  + this.value+'<span class="cross" onclick="remove_tag()">X</span>'+ "</a>");

        function remove_tag(){
        //what to do here?
        }
        tags.push(this.value);
        this.value = "";
    }
});

Answer 1

这是我的JSFiddle：http://jsfiddle.net/Wky2Z/11/

基本上，聆听要点击的.cross，然后从数组中移除和删除元素

//enter something in textbox and press enter....
var tags = [];
$("#textBox").keypress(function (e) {
    if (e.which === 13) {
        $(".target").append("<a href='#' class='tag' >"  + this.value+'<span class="cross">X</span>'+ "</a>");


        tags.push(this.value);
        this.value = "";
    }
});

$('body').on('click','.cross',function(){

    tags.splice($(this).parent('a').html(), 1);
    $(this).parent('a').remove();
});

至于十字架的外观，SO使用CSS Sprite，所以你可以通过制作两个状态的png或gif或jpeg，关闭（灰色）和悬停（红色）来切换{{ 1}}用css红色，例如：background-position

Answer 2

您可以删除使用remove()的元素。另外，我建议您使用jQuery事件而不是使用内联事件。（如果你看一下stackoverflow的源代码，你会注意到没有内联的javascript调用）

在这种情况下，您需要向document对象添加一个事件处理程序，因为您希望将事件分配给从一开始就未加载到DOM中的元素。

$(document).on('click', '.tag span', function(){
   $(this).parent().remove();
});

活生生的例子：http://jsfiddle.net/Wky2Z/7/

更新

我更新了从标签列表中删除元素的示例： http://jsfiddle.net/Wky2Z/8/

为标记链接添加了data-value：

$(".target").append("<a href='#' class='tag' data-value='" + this.value + "' >"  + this.value+'<span class="cross">X</span>'+ "</a>");

修改了点击事件：

$(document).on('click', '.tag span', function(){
   $(this).parent().remove();
   var removeItem = $(this).parent().data('value');

   tags = $.grep(tags, function(value) {
       return value != removeItem;
   });
});

Answer 3

对于完整的jQuery解决方案，您可以删除内联remove_tag函数并使用jQuery on函数。它也适用于动态创建的元素。

将一个或多个事件的事件处理函数附加到选定的元素。

在这里，您可以使用remove获取已删除元素的父元素并将其从DOM中删除。

要将数组与当前情况“同步”，您可以使用grep从数组中删除该项目;请注意removedItem变量用于仅获取父文本，不包括文本中的子项。

代码：

//enter something in textbox and press enter....
var tags = [];
$(document).ready(function () {

    $('body').on('click', 'span.cross', function () {
        var removedItem = $(this).parent().contents(':not(span)').text();
        $(this).parent().remove();
        tags = $.grep(tags, function (value) {
            return value != removedItem;
        });
    });

    $("#textBox").keypress(function (e) {
        if (e.which === 13) {
            $(".target").append("<a href='#' class='tag' >" + this.value + '<span class="cross">X</span>' + "</a>");

            tags.push(this.value);
            this.value = "";
        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/pDFnG/

Answer 4

以下是更新的链接：http://jsfiddle.net/Wky2Z/6/

将remove_tag移到keypress事件句柄之外，并将this指针传递给它以便快速解决：

//enter something in textbox and press enter....
var tags = [];

function remove_tag(x) {
    $(x).parent('a').remove();
}
$(function () {
    $("#textBox").keypress(function (e) {
        if (e.which === 13) {
            $(".target").append("<a href='#' class='tag' >" + this.value + '<span class="cross" onclick="remove_tag(this)">X</span>' + "</a>");

            tags.push(this.value);
            this.value = "";
        }
    });
});

创建stackoverflow标记系统？

4 个答案:

更新