jQuery: Ignore classes inside a
element

Question

I have following html list:


This is my first valueX
This is my second valueX
(...)

and I am using this jQuery to get all 'li' elements:

let replyOptions = [];
        $('.ReplyPill').each(function () {
            replyOptions.push($(this).text());
        });

The problem is that the "X" from the 'div' is also read and my output looks like this: "This is my first valueX"

I already tried ".not('#close')" to exclude the div, but it did not change anything.

So is there a way to ignore the 'div' with the id "close" in the loop?

user_295783 · Answer

IDs need to be unique - you need a class instead

Also DIV is not a valid child of a span

Anyway

let replyOptions = $('.ReplyPill').map(function() {
  return $(this).contents().get(0).nodeValue; 
}).get();

console.log(replyOptions);


// PS how to delegate the click on the X

$("#list").on("click",".close",function() {
  $(this).closest("li").hide(); 
})

li {
  width: 200px;
  background-color: yellow;
}

.badge {
  display: inline-block;
  float: right;
}



  This is my first valueX
  This is my second valueX

user_519413 · Answer

Exclusions in selectors are a little tricky, especially when dealing with text nodes. A simpler approach would be to wrap the text you want to retrieve in its own element and target it directly.

Also note that it's invalid HTML to place div elements inside span. In addition, you can use map() to build your array more effectively. Try this:

let replyOptions = $('.ReplyPill span.value').map((i, el) => el.textContent).get();
console.log(replyOptions);



  
    This is my first value
    X
  
  
    This is my second value
    X

jQuery: Ignore classes inside a <li> element

2 Answers