title: Jquery Function Is Not Hiding An Element On Completion of Get Request
body: <p>I am trying to use jQuery to send a get request to the server, and I believe it's going correctly because a record is being deleted, but I want to hide the clicked element after the request has been successfully completed.</p>
  <p>Here is an example html snippet, which is being generated via a <code>jinja2</code> template:</p>
  <pre><code>    {% for class in classes %}
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;{{ class[0] }}&lt;/th&gt;
      &lt;td&gt;{{ class[1] }}&lt;/td&gt;
      &lt;td&gt;{{ class[2] }}&lt;/td&gt;
      &lt;td&gt;&lt;a href=&quot;/classes/{{ class[0] }}&quot;&gt;{{ class[4] }}&lt;/a&gt;&lt;/td&gt;
      &lt;td class=&gt;
        &lt;svg class=&quot;bi bi-trash&quot; width=&quot;1em&quot; height=&quot;1em&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;currentColor&quot; id=&quot;{{ class[0] }}&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
        &lt;path d=&quot;M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z&quot;/&gt;
        &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z&quot;/&gt;
        &lt;/svg&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  {% endfor %}
  </code></pre>
  <p>The picture contained inside the <code>svg</code> tag is that of a trash can, and I have a jquery script that initiates a <code>GET</code> request to a python server to delete the record with the accompanying <code>id</code> value, like so:</p>
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  
  $(&quot;svg&quot;).click(function(){
    var id = $(this).attr('id');
    decision = window.confirm(&quot;Are you sure you want to delete this class?&quot;);
    if (decision === true) {
      var url = '/classes/' + id + '/delete';
      jQuery.get(url, function(){
        console.log(&quot;It worked.&quot;);
        $(this).closest('tr').hide();
      });
    }
   });
  
  });
  &lt;/script&gt;
  </code></pre>
  <p>The idea is if you click on the icon you're asked if you want to delete the corresponding record, and if you click Okay, then the get request is initiated.</p>
  <p>As of now, when this happens, the record IS being deleted, but the view on the page doesn't change unless I refresh it.  Assuming this is the correct behavior, I'd like to just hide the row containing the icon, which is the idea behind the jquery script, but the row is not being hidden and I'm not sure where my code is incorrect.</p>
  <p>Would love to know what I'm doing wrong.</p>