title: Jquery cannot read property of null error
body: <p>Hi I'm learning Jquery and I can't get it to run a function - code below.</p>
  
  <p>I've set up a simple select box and then tried to add an on change event to it.  Originally I tried with a .change but then I read that using the method shown is better since it doesn't rely on the element being available at the start.</p>
  
  <p>I'm just getting an error of Uncaught TypeError: Cannot read property 'find' of null.  I've not used jsfiddle before but I've tried to set one up here <a href="https://jsfiddle.net/2L6z3fdm/" rel="nofollow">https://jsfiddle.net/2L6z3fdm/</a></p>
  
  <p>Help!</p>
  
  <pre><code>            &lt;select id="roomCapacity" &gt;
                &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
                &lt;option value="saab"&gt;Saab&lt;/option&gt;
                &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
                &lt;option value="audi"&gt;Audi&lt;/option&gt;
              &lt;/select&gt;
              &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
              &lt;script&gt; 
               $( "#roomCapacity" ).on("change",function(){
                          roomLayoutBox = ["Volvo","Ford"];
                          console.log(this.value);
                          $('#roomStyle').find('option:not(:first)').remove();
  
                      });
              &lt;/script&gt;
  </code></pre>