I need to find all elements in $('.post-content') that do not have data attributes. I tried to say something like if (!$('.post-content p').attr('data-example')) { ... }

But obviously that does not work. So how would I do the following:

Find all p tags that belong to .post-content who do NOT have a data-attribute and remove them.

I think its very straight forward, but all the stack questions and docs, and jquery and the internet just has "how to add, how to find, how to add a value - to the data attribute"

So I was not pletely clear, my apologies. In the example:

<div class="post-content">
  <p data-attribute="foo">
    <span data-attribute="boo">
     <p>...</p>
    </span>
  </p>
  <p> ... </p>
</div>

I do not want nested p tags, like the one you see here, where there is a nested p tag under the p tag that has a data attribute, to be removed. Just top level p tags that do not have a data attribute.

The solutions provided tend to remove nested and top level.

I need to find all elements in $('.post-content') that do not have data attributes. I tried to say something like if (!$('.post-content p').attr('data-example')) { ... }

But obviously that does not work. So how would I do the following:

Find all p tags that belong to .post-content who do NOT have a data-attribute and remove them.

I think its very straight forward, but all the stack questions and docs, and jquery and the internet just has "how to add, how to find, how to add a value - to the data attribute"

So I was not pletely clear, my apologies. In the example:

<div class="post-content">
  <p data-attribute="foo">
    <span data-attribute="boo">
     <p>...</p>
    </span>
  </p>
  <p> ... </p>
</div>

I do not want nested p tags, like the one you see here, where there is a nested p tag under the p tag that has a data attribute, to be removed. Just top level p tags that do not have a data attribute.

The solutions provided tend to remove nested and top level.

• javascript
• jquery
• jquery-selectors

4 Answers 4

Not having a particular data attribute

You can use a bination of the :not() and [attribute] selectors (fiddle):

$(".post-content p:not([data-something])").remove();

Not having any data attributes

A.: You could check if there's anything in the element's dataset using Object.keys() (fiddle):

$(".post-content p").filter(function(){
   return Object.keys(this.dataset).length === 0;
}).remove();

... or you could use for...in:

$(".post-content p").filter(function(){
   for (var prop in this.dataset) {
       return false;
   }
   return true;
}).remove();

_{Note: Depending upon the browsers you need to support, dataset may not be available.}

B.: You could simply iterate over the element's attributes (fiddle):

$(".post-content p").filter(function(){
    return ![].some.call(this.attributes, function(attr){
        return /^data-/i.test(attr.name);
    });
}).remove();

_{See also: filter() and Array.prototype.some()}

You can use .not() and the has attribute selector

$('.post-content p').not('[data-example]')

Do you mean a specific data attribute, or just any data attribute (e.g. data-a, data-b, ... data-z, data-aa, data-ab, ...)?

If you mean a specific attribute then something like this should work:

$(".post-content p:not([data-example]").remove()

But if you mean ANY data attribute, that's a whole 'nother thing. You'd have to find all the potential elements, then enumerate each of their attribute collections (e.g. $foo[0].attributes) to see if any of their names start with "data-". If you have to do that I hope you don't have a lot of elements, it won't be very fast. Perhaps you could explain what the problem you're trying to solve is as there may be a better way to do it than this. Such as keeping a known specific attribute on those elements.

You can either use the .dataset property (only works in newer browers) or you can use the .attributes property and look for attributes that start with "data-".

Here's a version that use the attributes list and will work in a wide range of browsers (doesn't require support for .dataset):

$(".post-content").find("*").filter(function() {
    var attrs = this.attributes;
    regex = /^data-/;
    for (var i = 0; i < attrs; i++) {
        if (regex.test(attrs[i].name)) {
            // found a "data-xxxx" attribute so return false to avoid this element
            return false;
        }
    }
    // did not find any "data-xxxx" attributes so return true to include this element
    return true;
}).remove();

Your question wasn't entirely clear on one point. This code examines all descendants of .post-content. If you wanted to narrow it to only certain types of objects in that hierarchy, you can change the initial selector to narrow it.