jquery delegate clicks on a class but only if not clicking on a specific child

I have this delegate with jquery

$('body').delegate('.line-item','mouseup',function(){
        // more code gets run 
})

a sample of the dom with this class

<div class="line-item">
  <div class="thumb">
    Image goes here
  </div>
  <div class="title">
    Title goes here
  </div>
  <div class="destroy">
    Destroy Button goes here
  </div>
</div>

Want: when user clicks anywhere inside this div.line-item that's not the destroy class div, some code gets run to display this line item, but if they do click on that div.destroy, 开发者_StackOverflowthat line item won't get displayed but gets destroyed instead. So I don't know what the CSS selector should be like, I know that there's a :not selector, though I fail to cook up a selector with it that will do the trick,

any thoughts?

thanks!

Just do

$('div.line-item').delegate('div:not(".destroy")', 'mouseup', function() {
    ....
})

Check working example at http://jsfiddle.net/trVKF/2/

Here's what I would use:

// to select the thumb and title
$("div.line-item div:not(.destroy)").click(function(){code...});

// to select destroy
$("div.line-item div.destroy").click(function(){});

Docs on "not" selector: http://api.jquery.com/not-selector/

Hope that helps.

You just need to add this to what you already have.

$('body').delegate('.destroy','mouseup',function(e){
    $(this).hide();  // or whatever 
    e.stopPropagation();
});