title: How to remove element on delete without refreshing page jquery
body: <p>How to remove the item from page after successfully deletion from database with php and jquery? I have a list with users. When some of them is deleted I want just to remove it from page.
  This is jquery part</p>
  
  <pre><code>$(document).ready(function () {
  
      $('.delete').click(function () {
          var parent = $(this).closest('media-heading');
          $.ajax({
              type: 'get',
              url: 'friendRemove.php',
              data: 'ajax=1&amp;delete=' + $(this).attr('id'),
              beforeSend: function () {
                  parent.animate({
                      'backgroundColor': '#fb6c6c'
                  }, 300);
              },
  
          });
      });
  
      $('.delete').confirm({
          text: "Are you sure?",
          title: "Please Confirm",
  
          confirmButton: "Yes",
          cancelButton: "No",
          post: true,
          confirmButtonClass: "btn-danger",
          cancelButtonClass: "btn-default",
          dialogClass: "modal-dialog modal-lg"
      });
  });
  </code></pre>
  
  <p>I have tried to put success function in ajax part but nothing happen. This is what I tried.</p>
  
  <pre><code>success: function () {
      parent.fadeOut('slow', function () {
          $(this).remove();
      });
  }
  </code></pre>
  
  <p>HTML part</p>
  
  <pre><code>&lt;div class="media"&gt;
      &lt;div class="pull-left"&gt;';
          &lt;img class="media-object dp img-circle" src="img/no-image-fun.gif"&gt;&lt;/div&gt;
      &lt;div class="media-body"&gt;
          &lt;h4 class="media-heading"&gt;username&lt;/h4&gt; &lt;a href="" class="delete" id="'.$row['id'].'"&gt;&lt;i class="fa fa-times pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;h5&gt;images&lt;/h5&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>