"Delegate" hide action in jQuery? Can't match an easy element

Question

The title's kinda messy, so I'll clarify here. I have a set of buttons which must interact which each other. For example when one clicks Edit, the button disappears and a Save button appears instead. There is another Delete button which actually deletes something, but while we're in edit mode (when the save button is present), the function of the Delete button switches and becomes the Close button for the edit mode. This is kind of a common scenario in the web world.

However, I have this little trouble with making the Save button disappear when it's clicked or the Close edit mode button is clicked. I can't make it vanish via jQuery!

So to break this up into steps, here is what it looks like:

• User clicks edit
• User gets some slight changes in the UI: Edit button vanishes and Save button appears
• User does what he wishes while editing
• User hits Save or Close to finish the editing
• The Save button still remains in the UI

I explicitly told jQuery to hide that button once the user is done and I've tried a million ways to hide it, starting with a simple hide() by using the class name as the selector and then using e.delegateTarget, but none worked.

To see my problem in action, see this JSFiddle: http://jsfiddle.net/52VtD/3272/

(Note the Close button in the right. I guess its position is absolute in Bootstrap 3.)

How do I make the save button vanish upon hitting Save (itself) or Close/Delete?

Answer 1

even though e.target.style.display = 'none' will work.. I put a fiddle together (using pure JS) for you to review and adopt.

http://jsfiddle.net/brcaswell/52VtD/3278/

JS

(function(window){
    window.ImgBoxTool = {
        'boxes': null,
        'init' : function () {
            ImgBoxTool.boxes = document.querySelectorAll('div.img-box');
            for (i=0; i < ImgBoxTool.boxes.length; i++) {
                ImgBoxTool.boxes[i].querySelector('button.edit').addEventListener('click', ImgBoxTool.Handlers.onEditBtnClick, false);
                ImgBoxTool.boxes[i].querySelector('button.save').addEventListener('click', ImgBoxTool.Handlers.onSaveBtnClick, false);
                ImgBoxTool.boxes[i].querySelector('button.close').addEventListener('click', ImgBoxTool.Handlers.onCancelBtnClick, false);
            }
        }
    }
    window.ImgBoxTool.Handlers = {
        'onEditBtnClick' : function (e) {
            e.preventDefault();

            var image_id = e.target.id || e.target.parentElement.id || e.target.parentElement.parentElement.id;
            var elm = document.getElementById(image_id);
            elm.className = elm.className.replace('edit-mode','').replace('  ', ' ') + ' edit-mode';

            elm.querySelector('.edit').style.display = 'none';                    
            elm.querySelector('.save').style.display = 'block';

            elm.querySelector('.close').className = elm.querySelector('.close').className.replace('delete-img-box','').replace('  ',' ') + ' close-edit-mode';
            console.log('[ImgBox] %o \n\t %o',elm,e);
        },
        'onSaveBtnClick' : function (e) {
            e.preventDefault();
            var image_id = e.target.id || e.target.parentElement.id || e.target.parentElement.parentElement.id;
            var elm = document.getElementById(image_id);
            elm.className = elm.className.replace('edit-mode','').replace('  ', ' ');
            elm.className = elm.className.replace('modified','').replace('  ', ' ') + ' modified';



            elm.querySelector('.edit').style.display = 'block';                      
            elm.querySelector('.save').style.display = 'none';

            elm.querySelector('.close').className = elm.querySelector('.close').className.replace('close-edit-mode','').replace('  ',' ') + ' delete-img-box';

            console.log('[ImgBox] %o \n\t %o',elm,e);
        },
        'onCancelBtnClick' : function (e) {
            e.preventDefault();

            var image_id = e.target.id || e.target.parentElement.id || e.target.parentElement.parentElement.id;
            var elm = document.getElementById(image_id);
            elm.className = elm.className.replace('edit-mode','').replace('  ', ' ');

            elm.querySelector('.edit').style.display = 'block';                      
            elm.querySelector('.save').style.display = 'none';

            elm.querySelector('.close').className = elm.querySelector('.close').className.replace('close-edit-mode','').replace('  ',' ') + ' delete-img-box';
            console.log('[ImgBox] %o \n\t %o',elm,e);
        }
    }                                                                       
}(window));
        ImgBoxTool.init();

Note: ImgBoxTool.init() needs to be run when the DOM is loaded.

HTML

<div id="1" class="img-box">
<hr />
    <button class="edit edit-img-box" aria-hidden="true">Edit</button>
    <button class="save approve-edit" aria-hidden="true">Save</button>
    <button class="close delete-img-box" aria-hidden="true">&times;</button>
</div>
<div id="2" class="img-box">
<hr />
    <button class="edit edit-img-box" aria-hidden="true">Edit</button>
    <button class="save approve-edit" aria-hidden="true">Save</button>
    <button class="close delete-img-box" aria-hidden="true">&times;</button>
</div>

CSS

button.close.delete-img-box {background-color:red;color:white;}

div.img-box {clear:both;overflow:visible;padding:1em;position:relative;min-height:8em;background-color:whitesmoke;border:0.1em outset whitesmoke;}
div.img-box:nth-child(even) {margin-bottom:1em;box-shadow:inset 0em -2em 8em -4em rgba(0,0,0,0.3);}
div.img-box:nth-child(odd) {margin-bottom:1em;box-shadow:inset 0em -2em 8em -4em rgba(0,0,0,0.8);}
div.img-box:last-child {margin-bottom:0em;}

button {box-shadow:inset 0em -2em 2.5em -2em rgba(0,0,0,0.6);text-shadow:0.05em 0.08em 0.11em rgba(182,182,182,0.6);cursor:pointer;}
button:hover {}
button.save, button.edit {position:absolute;left:0;bottom:0;font-size:1.2em;padding:0.25em 0.5em;text-align:left;}

button.edit {display:block;}
button.save {display:none;}
button.close, button.cancel {position:absolute;right:0;top:0;display:block;font-size:2em;height:1.25em;line-height:1.25em;width:2em;}



div.img-box.edit-mode { background: orange; color: black;border-color: black;}

div.img-box.edit-mode > button.edit {display:block;}
div.img-box.edit-mode > button.save {display:none;}
div.img-box hr {box-shadow:0.1em -0.1em 0.7em rgba(0,0,0,0.2);position:absolute;top:2em;left:0em;right:0em;width:auto;}
div.img-box.modified hr { background: #f0c36d; color: #f0c36d;border-color: #f0c36d;}