使用jQuery创建和删除信息

时间:2009-04-09 06:00:14

标签: javascript jquery

我正在开发一个标记系统,我希望用户能够在页面上添加和删除标记。对于每个添加的内容,我正在显示带有标记的小div和用于删除标记的x。我有添加功能,但我不知道如何去做,所以我可以删除它们。我还有一个隐藏的输入,它应该包含所有值,以便在提交信息时我可以使用它。

继承我无效的尝试:

function tagsremove(tag) {
    $('#hiddentags').val().replace('/'+tag+'\,\s/', '');
    $("#tagdiv-"+tag.replace(" ","_")).fadeOut('normal', function(){
        $(this).remove();
    });

}
$(document).ready(function(){
    $('#tagbutton').click(function(){
        var tags = $('#tagsbox').val().split(", ");
        for (var i in tags) {
                    $('#hiddentags').val($('#hiddentags').val() + tags[i] +", ");
            $('#curtags').append("<div class='tag'>" + tags[i] + " <a href='#' id='#tagdiv-"+tags[i].replace(" ", "_")+"' onclick='tagsremove(\""+tags[i]+"\");' >x</a></div>");
        }
        $('#tagsbox').val('');
    });
});

继承人的HTML:

<div class='statbox'>
    <form method='post' action='post.php' id='writeform'>
        <p class='subtitle'>Title</p>
        <input type='text' name='title' id='titlebox' /><br />
        <p class='subtitle'>Body</p>
        <textarea id='postbox' name='body' rows='10'></textarea><br />
        <p class='subtitle'>Tags</p>
        <input type='text' id='tagsbox' /><input type='button' id='tagbutton' value='Add' />
        <p class='subsubtitle'>Seperate by commas (eg. "programming, work, job")</p>
        <div class='subsubtitle' id='curtags'>Current Tags:</div>
        <input type='hidden' value='' name='tags' id='hiddentags' />
    </form>
</div>

2 个答案:

答案 0 :(得分:1)

使每个标记div都具有相关ID。例如,对于“play pen balls”标签,您的ID可能是“tagdiv-play_pen_balls”。现在你可以做到

function removeTag(tag) {
    $("#tagdiv-"+tag.replace(" ","_")).remove();
}

删除可见的div。

(我不确定这是不是你要求的,但是......)

答案 1 :(得分:0)

您应该使用.html('');

而不是使用.val('')

http://docs.jquery.com/Manipulation