title: Remove all events binding inside a parent div using jquery
body: <p>I have <code>myclass</code> div and inside that there are many childs with different event binding. On clicking "remove" below, I want to remove all events binding of all child in it. But following code is not working. </p>
  
  <pre><code>&lt;div class="myclass"&gt;
    &lt;select class="selectable"&gt;
      &lt;option value="1"&gt;one&lt;/option&gt;
      &lt;option value="2"&gt;two&lt;/option&gt;
    &lt;/select&gt;
    &lt;!-- I have many more elements ~30 or so with events associated with them.... --&gt;
    &lt;div id="askme"&gt;ask me&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="xyz"&gt;i have event on this element too that should remain intact&gt;/div&gt;
  &lt;div id="remove"&gt;remove&lt;/div&gt;
  
  &lt;script language="javascript"&gt;
  
    $(document).on('ready page:load', function () {
  
      $(document).on("change",".selectable", function(e) {
        //something
      });
  
      $(document).on("click","#askme",function(e){
        //something
      });
  
      //more events binding here.....
    });
  
  
    // Using http://api.jquery.com/off/
    $("#remove").on('click', function (e) {
      $(".myclass *").off(); //unbind event of all child under `myclass` parent div
    });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>When I click "remove", I want to remove all events associated with all elements inside <code>myclass</code> div.</p>
  
  <p>I don't want to use <code>.one</code> for invoking events with child elements only once. So that is out of scope to solve this problem.</p>
  
  <p><strong>Note:</strong>
  I have other dom elements in document, that should remain intact. SO I cannot unbind events on document level</p>