title: jQuery detach() and remove() both not working on appended element
body: <p>I have a body on click function that conditionally adds or removes a button.</p>
  
  <p>The adding works, but neither <code>remove()</code> nor <code>detach()</code> works.</p>
  
  <p>I am rotating an image and I only want to show a "Save" button when the image is rotated from the original.</p>
  
  <p>This is all inside document ready</p>
  
  <pre><code>$(document).ready(function() {  
      var $save = $('&lt;div id="savebutton_container"&gt;&lt;button name="savebutton" id="savebutton"&gt;Save&lt;/button&gt;&lt;/div&gt;');
  
          $('body').on('click','img',function() {
              if(typeof rotate.counter == 'undefined') {
                  rotate.counter = 0;
              }   
              rotate.counter += 90;
              if(rotate.counter === 360) {
                  rotate.counter = 0;
              }
              console.log(rotate.counter);
              $(this).removeClass(function(index,css){ // clear classes first.
                  return (css.match (/(^|\s)rotate\S+/g) || []).join(' '); // remove rotational classes
              });
  
              if(!(rotate.counter == 0) ) { // NOT 0 degrees
                  console.log('rotate counter is not 0');
                  $(this).addClass('rotate' + rotate.counter); // rotate the image
                  if( $("#savebutton_container").length === 0 ) { // WORKS!
                      $(this).parents().append($save); // global $save
                  }
              } else {
                  console.log('rotate counter is 0');
                  $("#savebutton_container").detach(); // works seemingly randomly
                 // Also tried $save.detach();// also tried .remove();
  
              }
  
      });
  });
  </code></pre>
  
  <p>Every once in a while the save button will disappear. The console ALWAYS logs the "rotate counter is 0" whenever it is supposed to, but the save button does not go away!</p>