JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div id="example" style="background:yellow;height:200px;width:200px;">
 <button>Some text</button>
</div>

JavaScript

$(document).ready(function(){

/*
 I want #example to .hide when it's clicked, but I don't want it to .hide when it's child elements get clicked.   
*/
    $('#example').click(function(e){
        e.preventDefault();
        $(this).hide();        
    });
    
    $('#example > button').mouseout(function(){
        $('#example').on('click', function(){
            e.preventDefault();
            $(this).hide();         
        });
    });
            
    $('#example > button').mouseenter(function(){
        $(this).click(function(){
             $('#example').unbind('click');
        });    
    });
            
});