jQuery fails to remove parent div

Question

I am trying remove parent div when AJAX PHP Script is finished. Problem is that you when php Script is jQuery fails to remove div.

Does someone knows where's error in my code and why I can't remove wanted DIV with methods that I provided?

Here is code:

HTML:

<div id="newTask">  
<input type="hidden" id="taskID" 1="" name="taskID" value="39">
<input type="text" id="taskName1" name="taskName1" value="12">  
<span class="remove" onclick="removeDIVS(39);"></span>
</div>

JS:

 function removeDIVS(currentID){

    $.ajax({
      url: 'scripts/removeTask.php',
      type: 'post',
      data: 'id='+currentID,

      success: function(data, status) {
        if(data == "OK") {
            $(this).parent().remove();
        }
        else{
                  $('#TaskResult').html(data);
        }
      },
      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      }
    }); // end ajax call
  }

Answer 1

try:

HTML:

<div id="newTask">  
<input type="hidden" id="taskID" 1="" name="taskID" value="39">
<input type="text" id="taskName1" name="taskName1" value="12">  
<span class="remove" data-myid="39"></span>
</div>

JS:

$(".remove").click(function(){
var currentID = $(this).data('myid');
var parenID = $(this).parent().attr('id');
 $.ajax({
      url: 'scripts/removeTask.php',
      type: 'post',
      data: 'id='+currentID,

      success: function(data, status) {
        if(data == "OK") {
            $("#"+parenID).remove();
        }
        else{
                  $('#TaskResult').html(data);
        }
      },
      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      }
    }); // end ajax call
})

Answer 2

Use

$("#newTask").remove();

instead of

$(this).parent().remove();

because here $(this) is not what you are expecting.