删除父div - jquery

Question

当用户点击删除时，我需要删除父div。 到目前为止，我有以下代码：

<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>

此代码执行删除但div仍未解包。 我也尝试了remove（）函数，但仍然没有运气。

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

这里面的ajax成功并不是指标签。 您应该最初存储此引用，并使用内部ajax成功的引用来执行删除操作。

<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);
            }
    });
  } 

});    

我改变了方法。 指定了一个要删除的类，并为其添加了一个单击侦听器。 在其中显示确认提醒并进行ajax调用等，我希望这种方法对你有用。

小提琴

Answer 3

你应该尝试$（this）.parent（）。remove（this）; 而不是$（this.className）.unwrap（）; 如果要删除刚刚单击的按钮的父标记，请在Confirmation（）函数内部。

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>

编辑：现在包括失败案例。 编辑2：包括使用功能;

Answer 5

尝试这个

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

Answer 6

首先，我不明白为什么你传递消息“你确定要删除吗？” 作为一个论点。 有更好的方法来做到这一点，但至于现在我只会纠正你的代码，我不是100％确定这个指针是否有效。

改变这个说法

 $(this.className).unwrap();  

至

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

如果你想用class =“row”删除div

将语句更改为

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