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?

Kevin Bowersox · Accepted Answer · 2013-11-26 11:13:26Z

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();
});

edited Nov 26, 2013 at 11:13

answered Nov 26, 2013 at 11:06

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aishwarya Shiva Over a year ago

Thank @kevin. But I am confused with the use of clone(). Can you explain me your JS code? As I am not so good at JS.

Kevin Bowersox Over a year ago

You need to obtain the value within the div.tags, however the div contains both a value such as javascript,java,jquery as well as an <a/>. Well I'm sure you don't want that <a/> tag included in the values. So I clone the element, which makes an exact copy, then remove the <a/> from the clone, so I can simply retrieve the value. This leaves the original element untouched, while allowing me to simply call .text() to get the value inside the div.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related