jquery exclude elements from html method

Question

How can I select the html of all elements nested under <div class="thewrapper"> except ones with class="excludeme" ?

<div class="thewrapper">
  <div class="excludeme"> some content to exclude.... </div>

  <div class="whatever">
      <span> lots of content and tags </span>
  </div>

  <div class="excludeme"> some content to exclude again.... </div>

  <div class="whatever">
      <span> more content and tags </span>
  </div>

I have been fiddling with jquery .not and :not operators and just cannot get it working. E.g. the following doesn't work:

var pagehtml = $("div[class^='thewrapper']:not(div[class^='excludeme']").html();
var pagehtml = $('div[class^="thewrapper"]').not('[class="excludeme"]').html();
var pagehtml = $("div.thewrapper:not(:has(div.excludeme))").html();
var pagehtml = $('div:not(".excludeme")').html();

@RokoC.Buljan I think the question isn't duplicate of provided link. Problem in this question is select child of element without one element. — Mohammad, Oct 28 '16 at 19:18
@Mohammad exactly, without the children `.excludeme` see answer below. Does exactly what's asked. The duplicate question asks for `text` (instead of `html`) but basically the principle is the same. — Roko C. Buljan, Oct 28 '16 at 19:19
That is brilliant. Yes, this is the exact solution to my question. Sorry for not noticing it before posting. Much thanks for answering!! — Jason908, Oct 28 '16 at 19:33

score 1 · Accepted Answer · edited May 23 '17 at 10:32

You could use this micro jQuery plugin I've created for a similar Question to easily get an element's content (text or html) excluding/ignoring a specific selector:

$.fn.ignore = function(sel){
  return this.clone().find(sel||">*").remove().end();
};

var notExcludeme = $(".thewrapper").ignore(".excludeme").html();
console.log(notExcludeme);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="thewrapper">
  <div class="excludeme"> some content to exclude.... </div>

  <div class="whatever">
    <span> lots of content and tags </span>
  </div>

  <div class="excludeme"> some content to exclude again.... </div>

  <div class="whatever">
    <span> more content and tags </span>
  </div> 
  
</div>

score 0 · Answer 2 · answered Oct 28 '16 at 19:45

0

Here's just another solution using css selectors. Since you tried to do it in a similar way.

$(function() {
  $('.thewrapper :not(.excludeme)').css('background', 'aqua');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="thewrapper">
  <div class="excludeme">
    some content to exclude....
  </div>

  <div class="whatever">
    <span> lots of content and tags </span>
  </div>

  <div class="excludeme">
    some content to exclude again....
  </div>

  <div class="whatever">
    <span> more content and tags </span>
  </div>
</div>

answered Oct 28 '16 at 19:45

Mihailo

4,736
4
22
30

The code work for `.css()` but doesn't return right html. – Mohammad Oct 29 '16 at 07:37
It just needs a beet of tweaking. Here's a [JSBin example](http://jsbin.com/firojew/edit?html,js,console) with the code for grabbing html using css selectors and jquery. – Mihailo Oct 29 '16 at 09:25

jquery exclude elements from html method

2 Answers2