Question

我在div中有以下信息

<div class="list">Abc, Test, Ready</div>

在div下面，我有这个附加信息

<a href="javascript:void(0)" class="Abc">Remove Abc</a>
<a href="javascript:void(0)" class="Test">Remove Test</a>
<a href="javascript:void(0)" class="Ready">Remove Ready</a>

我正在尝试编写一个jQuery函数，当您单击相关的删除链接时，它将删除Abc，Test，Ready（以及必要时的逗号）。

Answer 1

$('a').click(function() {
    var str = $(this).attr("class");
    $('.list').text($('.list').text().replace(str,''));
});

http://jsfiddle.net/PUure/

但如果您真的需要删除逗号，则需要更具创意：

$('a').click(function() {
    var str = $(this).attr("class");
    var rgx = new RegExp(str + ',?\\s*');
    $('.list').text($('.list').text().replace(rgx,''));
});

http://jsfiddle.net/PUure/4/

Answer 2

修改：更新（懒惰）删除不带正则表达式的尾随逗号;）

检查the fiddle

$(document).ready(function(){
    $('a').click(function(){
        $('div.list').html($('div.list').html().replace($(this).attr('class') + ', ', '').replace($(this).attr('class'), ''));
    });
});

Answer 3

你可以这样做：

$('a').click(function(e){
    e.preventDefault();
    var word = $(this).attr('class');
    var div = $('.list').text();
    div = div.replace(word, '');
        $('.list').text(div );

});

在这里摆弄http://jsfiddle.net/sysCc/

Answer 4

$('a').click(function(){
  var str = $(this).attr('class');
  var obj = $('.list');
  var currentText = obj.text();
  obj.text(currentText.replace(str,'');
});

或浓缩：

$('a').click(function(){
  $('.list').text($('.list').text().replace($(this).attr('class'),''));
});

Answer 5

最好将数据保存在数组中，然后修改该数组并使用新数据刷新div。

var data = ["Abc", "Test", "Ready"];
refresh();

$("#Abc").click(function() { remove("Abc") });
$("#Test").click(function() { remove("Test") });
$("#Ready").click(function() { remove("Ready") });

function refresh() {
    $("div").text(data.join(", "));
}

function remove(word) {
    for(var i = 0; i < data.length; i++) {
        console.log(i, data[i], word, data[i] == word);
        if (data[i] == word)
            data.splice(i, 1);
    }
    console.log(data);
    refresh();
}

http://jsfiddle.net/Xeon06/dHp3b/

jQuery函数将删除单击时的特定单词

5 个答案: