Adding a class with display none to an element after jQuery hide / show produces unexpected results

Question

I have boiled down the code from a much larger application to replicate the problem.

Adding a class that contains only display: none; to list elements after that have been hidden ( hide() ) and then shown ( show() ) leaves the element with a style="display: list-element;" and leaves those elements visible because the inline style overrides the classes. A working example can be found here - http://jsfiddle.net/jayblanchard/x5bpjogj/2/ You'll want to view the browser's console to see the changes to the DOM as shown here -

Here is the CSS -

.anchor-control-hidden {
    display: none;
}

Here is the JavaScript / jQuery -

var anchor = 'F1';
$('[data-anchor="'+anchor+'"]').find('.anchor-control').hide().show(); // this is done to replicate the problem
setAnchorControlButtons(anchor);

function setAnchorControlButtons(anchor){
  state = $('[data-anchor="'+anchor+'"]').attr('data-status');
  $('[data-anchor="'+anchor+'"]').find('.anchor-control').addClass('anchor-control-hidden');
  if( $('[data-anchor="'+anchor+'"]').attr('data-ahv') == 'null' ) {
      var ahvExists = false;
  } else {
      var ahvExists = true;
  }
    switch(state) {
       case 'laid':
           if( ahvExists ) {
                $('[data-anchor="'+anchor+'"]').find('.anchor-fetch, .anchor-raise').removeClass('anchor-control-hidden');
          } else {
                $('[data-anchor="'+anchor+'"]').find('.anchor-rack, .anchor-fetch').removeClass('anchor-control-hidden');
          }
            break;
    }
}

And finally the markup -

<div data-anchor="F1" data-status="laid" data-ahv="null">
<ul class="anchor-controls">
    <li class="anchor-control anchor-lay" data-action="anchor-lay">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Lay</span>
        </div>
    </li>
    <li class="anchor-control anchor-drop" data-action="anchor-drop">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Drop</span>
        </div>
    </li>
    <li class="anchor-control anchor-fetch" data-action="anchor-fetch">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Fetch</span>
        </div>
    </li>
    <li class="anchor-control anchor-raise" data-action="anchor-raise">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Raise</span>
        </div>
    </li>
    <li class="anchor-control anchor-retrieve" data-action="anchor-retrieve">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Retrieve</span>
        </div>
    </li>
    <li class="anchor-control anchor-rack" data-action="anchor-rack">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Rack</span>
        </div>
    </li>
</ul>
</div>

I have stripped away all of the irrelevant CSS and markup. In the example only two of the list items (rack and fetch) should be visible. Changing the data-ahv attribute on the div should result in only two list items (raise and fetch) to be displayed.

I have tried removing the style attribute from the list item and that results in other odd behavior. Do I need to quit using hide() and show() in favor of explicit classes or can this issue be solved in some other way?

Answer 1

$('[data-anchor="'+anchor+'"]').find('.anchor-control').hide().show().removeAttr('style');

I have updated your fiddle. I didn't see any odd behavior by adding removeAttr .

Answer 2

In this case the code base had to be refactored and the use of .hide() and .show() had to be removed in favor of classes that apply the display property more explicitly. This allows the behavior to be more predictable and for further functions to be added to the project with as little pain as possible.