title: How can make sure code after my ajax request only runs if the request was a success?
body: <p>I have a link, delete, that removes an item from an array, and then removes a row from a table on my html page.</p>
  
  <p>It runs the ajax request first to amend the array, then removes the row. If for some reason the ajax request was to fail then the html table row would still be deleted I think.</p>
  
  <p>Is there a way to make sure subsequent code afer the ajax request only runs if it is successful? I tried moving it into the success function but then it didn't run at all..</p>
  
  <p>This is how I have it set up at the moment... </p>
  
  <pre><code>$(document).ready(function () { //delete 
      $(document).on("click", "a[class='del']", function () {
          var ID = $(this).attr("id"); //&lt;----- get the ID of the column      
          $.ajax({
              //contentType: "text",
              url: 'proDel.php', //the url you are sending datas to which will again send the result
              type: 'GET', //type of request, GET or POST
              dataType: 'json', // jQuery will parse the response as JSON
              data: 'val1=' + ID, //Data you are sending 
              success: function (data) {
                  // do nothing, array was amended in php file                       
              }
          })
  
          //Code here that deletes the table row(runs whether the array was changed or not!!
      })
  })
  </code></pre>