Delete parent div - jquery

Question

I need to remove the parent div when user click on delete. So far I have below code:

<script>

function Confirmation(message, theurl)
{
  if(confirm(message)) {

    $.ajax({
        type: "POST",
        url: theurl,
        success:function(response){
                    //on success, hide  element user wants to delete.
                        $(this.className).unwrap();                 

                },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
    });
  } 

}

</script>

<div class="row">
   <div class="col-sm-6">test7</div>
   <div class="col-sm-3">Advanced</div>
   <div class="col-sm-3">
      <a href="http://localhost/v2/index.php/hr/employee/editSkill/10">
      <a href="javascript:Confirmation('Are you sure you want to delete?', 'http://localhost/v2/index.php/hr/employee/delete/1/skills/10');">
   </div>
</div>

This code perform the deletion but the div still not unwrap. I also try the remove() function but still no luck.

Answer 1

function Confirmation(message, theurl)
{
  var $this = this; 
  if(confirm(message)) {

    $.ajax({
        type: "POST",
        url: theurl,
        success:function(response){
              //based on the structure on your DOM
              $($this).parents('.row').remove(); 
            },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
    });
  } 

}

Answer 2

this inside the ajax success does not refers to the tag. You should store a reference of this initially and use the reference of the inside ajax success to do perform remove operation.

<div class="row">
    <div class="col-sm-6">MySQL</div>
    <div class="col-sm-3">Advanced</div>
    <div class="col-sm-3">
       <a href="http://localhost/v2/index.php/hr/employee/editSkill/3">
        EDIT
       </a>
       <a class="delete" href="javascript:void(0)">
        DELETE
       </a>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-sm-6">MySQL</div>
    <div class="col-sm-3">Advanced</div>
    <div class="col-sm-3">
       <a href="http://localhost/v2/index.php/hr/employee/editSkill/3">
        EDIT
       </a>
       <a class="delete" href="javascript:void(0)">
        DELETE
       </a>
    </div>
</div>
<hr>

$(".delete").click(function(e){
  var self = this;
  var didConfirm = confirm('Are you sure you want to delete?', 'http://localhost/v2/index.php/hr/employee/delete/1/skills/2');
  if (didConfirm == true) {  
    $.ajax({
        type: "POST",
        url: tourl,
        success:function(response){
                    //on success, hide  element user wants to delete.
                       $(self).parent().parent().next('hr').remove()
                       $(self).parent().parent().remove();
                },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
    });
  } 

});    

I changed the approach. Assigned a class to delete and added a click listener to it. Show the confirmation alert inside it and make ajax call etc., I hope this approach would work for you.

FIDDLE

Answer 3

You should try $(this).parent().remove(this); instead of $(this.className).unwrap(); inside the Confirmation() function if you want to delete the parent tag of button which you just clicked.

Answer 4

<script>
   function Confirmation(elem, msg) {
      if(confirm('Are you sure you want to delete?')){
         $.post(elem.href)
         .done(function(data){
             $(elem).parents(".row").remove();
          }).fail(function(data){
                 alert(data);
          });
        }
   } 
</script>

<div class="row">
   <div class="col-sm-6">test7</div>
   <div class="col-sm-3">Advanced</div>
   <div class="col-sm-3">
      <a href="http://localhost/v2/index.php/hr/employee/editSkill/10">
      <a onclick="Confirmation(this, 'Are you sure you want to delete?'); return false;" href="http://localhost/v2/index.php/hr/employee/delete/1/skills/10">
</div>

Edited: now includes fail case. Edited 2: includes use of function;

Answer 5

try this

$('body').on('click', '.buttonremove', function() {
    $(this).parents("div:first").remove();
});

Answer 6

First of all i don't get why you are passing the message "Are you sure you want to delete?" as an argument. There are really better ways to do this, But as for now i will just correct your code and I am not 100% sure if the this pointer will work.

change this statement

 $(this.className).unwrap();  

to

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

if you want to remove the div with class="row"

change the statement to

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