4

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

我的问题：

  • 如何删除附加的标签？
  • 如何使十字按钮（跨度）看起来与 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 = "";
    }
});
4

4 回答 4

2

这是我的 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();
});

至于十字架的外观，所以使用 CSS Sprite，所以你可以通过制作两个状态的 png 或 gif 或 jpeg 来做同样的事情，关闭（灰色）和悬停（红色）并background-position使用 css 将其切换为红色，例如：.cross:hover { background-position:0px -20px }

于 2013-08-21T14:35:54.320 回答
1

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

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

在这里，您可以获取已删除元素的父元素并使用remove.

要将数组与当前情况“同步”，您可以使用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/

于 2013-08-21T14:35:55.270 回答
1

您可以使用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;
   });
});
于 2013-08-21T14:11:07.523 回答
0

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

移出remove_tag按键事件句柄并将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 = "";
        }
    });
});
于 2013-08-21T14:10:16.097 回答