title: jQuery add/remove from DOM on browser resize
body: <p>I am using a little bit of jQuery I wrote (I'm not too good with JavaScript/jQuery) that adds/removes a div (in this case, .show500, .hide500) on a browser resize. Here is the code: </p>
  
  <pre><code>//Completely add/remove divs completely from DOM on browser resize
  
          $(function(){
  
              $(window).resize(function(){
  
                  var win = $(this); //this = window
  
                  if (win.width() &lt;= 500) { 
  
                      $('.show500').add();
  
                      $('.hide500').remove();
  
                  } else if (win.width() &gt; 500) { 
  
                      $('.hide500').add();
  
                      $('.show500').remove();
  
                  }
  
              });
  
          });
  </code></pre>
  
  <p>So if the browser window is less than or equal to 500, add the .show500 into the DOM, and remove the .hide500 from the DOM. </p>
  
  <p>Then, if the browser width is greator than 500, add the .hide500 into the DOM, and remove the .show500 from the DOM. </p>
  
  <p>However, when I use this code, the .hide500 div shows up by default, and then when I shrink the browser size, the .hide500 div hides and the .show500 never shows up. Then when I expand the browser, both of the divs are gone. </p>
  
  <p>Here is a jsFiddle of the code: <a href="http://jsfiddle.net/XzrPR/" rel="nofollow"><strong>http://jsfiddle.net/XzrPR/</strong></a></p>
  
  <p>I would appreciate any and all help from you guys! </p>