How to get dynamically loaded HTML tags with specific class from the page using JavaScript?

Question

I am adding some HTML tags using JavaScript like this:

function createTag(text) {
    if (text != '') {
        text = text.replace(',', '');
        if (/^\s+$/.test(text) == false) {
            var tag = $('<div class="tags">' + text + '<a class="delete">X</a></div>');
            tag.insertBefore($('input.tag_list'), $('input.tag_list'));
            $('input.tag_list').val('');
        }
    }

I want to get the values in the <div class="tags"> tags from all over the page. How can I do it?

Also how can I restrict the number of dynamically created tags of these types?

Answer 1

Select the tags and use the map() function to return an array. Within the function supplied to map() remove the a from a cloned tag.

var tags = $(".tags").map(function(){
    var clone = $(this).clone();
    $(clone).find("a").remove("a");
    return clone.text();
});

JS Fiddle: http://jsfiddle.net/ELxW4/

You could make life somewhat easier by wrapping the values in span tags:

<div class="tags"><span>javascript</span><a class="delete">X</a></div>
<div class="tags"><span>java</span><a class="delete">X</a></div>
<div class="tags"><span>jquery</span><a class="delete">X</a></div>

Then get the tags using:

var tags = $(".tags").map(function(){
    return $(this).find("span").text();
});