How to display display none as important using jquery

[user7777]

I have a div which is display block (getting the style through jquery) and now I want to make it display none when the user click on it only for the tablet and mobile view. So I used attr('style','display: none !important'). But it is taking display block as default. Is there any solution to overcome this.....

[Exequiel]

$('yourdiv').live('click', function(ev) {
$(this).hide("fast");
// or $(this).css({"display":"none"});
});

[user7777]

Hi Exequiel I used both the methods suggested by you but unfortunately both are returning the same output as before.

This is my code.....

if(windowWidth < 769) {
                        self.page.on("click",".addonUncheck",function(){
                            $('.singleAddon').attr('style','display: none !important');
                        });
                        self.page.on("click",".deleteAddon",function(){
                            $('#single_addon').show();
                        });
                    }

For desktop view the div is displayed as display: block using jquery now want to make it display: none only for mobile and tablet view... Any suggestions...