Question

How come when I do a console.log on elements that I append to a parent div come out with a bunch of carriage return nodes. Is there a way to remove this because when I try to add some css to these they break the application.

Here is my setup. I’m using underscore template to create my html. The tmpl is all working fine.

    var tmpl = $( template({items : list}) );

    var items = $(_.filter(tmpl, function(item){ 
        return ! $item.hasClass('pin'); 
    }));

    var domItems = items.appendTo($('.container'));

Here is the log

domItems = 

[<TextNode textContent="\n          \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, <TextNode textContent="\n           \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item, <TextNode textContent="\n         \n              ">, div.item]

I just want it to be returning the div.item element

Answer 1

Some browsers consider empty spaces as a text node. To filter them, just exclude all nodeTypes which are equal to 3 (Node.TEXT_NODE == 3):

var items = $(_.filter(tmpl, function(item){ 
    return ! $item.hasClass('pin') && this.nodeType !== 3;
}));