title: jquery, losing track of this after I call a different function. What is going on?
body: <p>I have a listener that looks like this:</p>
  
  <pre><code>$(coin_form_wrapper).on('click', '.remove_address_button', function(e) {
      debugger;
      remove_input_row(e)
    });
  </code></pre>
  
  <p>At the debugger, <code>$(this).parent()</code> is the correct div, or at least the div that I expect.</p>
  
  <pre><code>$(this).parent()
  w.fn.init [div, prevObject: w.fn.init(1)]
  </code></pre>
  
  <p>However, inside my function, the value of <code>$(this).parent()</code> is now the window:</p>
  
  <pre><code>function remove_input_row(e) {
      // no longer works or references the correct div
      $(this).parent('div').remove();
    }
  </code></pre>
  
  <p>this is what I get:</p>
  
  <pre><code>$(this).parent()
  w.fn.init [prevObject: w.fn.init(1)]
  </code></pre>
  
  <p>How do I fix this? Why is this happening?</p>
  
  <p>The fix is doing this inside my function:</p>
  
  <pre><code>$(e.target).parent('div').remove();
  </code></pre>
  
  <p>Is there any other way? This feels.... not great since now this function is dependent on <code>e</code> being passed into it always. Is this a problem?</p>