Remove html element which not contains specific class

Question

I am trying to remove li's with not active state, but cant make it work:

var html = $("#myjqgriddiv").remove("ul li:not(.ui-state-active)").html();

I have html and i want to remove li which not contains class .ui-state-active

After code above the li with .ui-state-active still there.

Need help.

UPDATE:

My intention to that html i am going to print using window.open("","Print")/document.write

@tvanfosson answer is working but there is one more little thing, the single li which stayed after first modification i want to edit as well i want to remove attribute "href" from its a child

var html = $('#myjqgriddiv') // select div
                .find('ul li:not(.ui-state-active)') // select elements to remove from div
                .remove()  // remove the matched elements
                .end() // revert back to the originally selected elements
                .html(); // and get the HTML


html = $(html).find("ul li.ui-state-active a)").removeAttr("href").html(); // not working?!

Answer 1

The argument to remove acts as a filter, not a selector. Since you've only selected the one element with id mygqgriddiv, the filter removes nothing. Try.

 var html = $('#myjqgriddiv') // select div
                .find('ul li:not(.ui-state-active)') // select elements to remove from div
                .remove()  // remove the matched elements
                .end() // revert back to the originally selected elements
                .find("ul li.ui-state-active a)") // now get the active ones
                .removeAttr("href") // remove the href attribute
                .end() // back to the original selection
                .html(); // and get the HTML

Answer 2

jQuery's remove will only remove elements from the selected list. Put the two selectors into the $ function and remove the result.

var html = $("#myjqgriddiv ul li:not(.ui-state-active)").remove().html();