如何在子项上删除父项后点击事件

I have anchor tag and this is my HTML

我有锚标签,这是我的HTML

<tr data-id="5" class="rowshow">
    <td>0</td>
    <td>
        <input name="ctl06" type="text" value="قرمه سبزی" />
    </td>
    <td>
        <input name="ctl08" type="text" value="1000" />
    </td>
    <td><a Class="deleteBtn">X</a>
    </td>
</tr>
<tr data-id="6" class="rowshow">
    <td>1</td>
    <td>
        <input name="ctl14" type="text" value="قرمه سبزی" />
    </td>
    <td>
        <input name="ctl16" type="text" value="1000" />
    </td>
    <td><a Class="deleteBtn">X</a>
    </td>
</tr>

And i want delete after click on "a" tag ajax success without refresh my page .and this my script

并且我想在点击“a”标签ajax成功后删除而不刷新我的页面。这是我的脚本

And this my script

这是我的剧本

$(".deleteBtn").click(function () {
    var id = $(this).closest(".rowshow").data("id");
    $.ajax({
        type: "POST",
        url: "EditFood.aspx/delete",
        data: "{'id':" + id + "}",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function () {
            $(this).parent(".rowshow").remove();
        }
    });
});

3 个解决方案

#1

Two issues:

The $(this) is not accessible inside ajax as this refers to the jqXHR object of the Ajax call and NOT the button clicked. Cache the object before the ajax call and then use it.

$(this)在ajax中是不可访问的,因为它指的是Ajax调用的jqXHR对象而不是单击的按钮。在ajax调用之前缓存对象,然后使用它。
You need to change .parent(".rowshow") to .closest(".rowshow"). parent only looks at the immediate parent, it doesn't scan up.

您需要将.parent(“。rowshow”)更改为.closest(“。rowshow”)。父级只查看直接父级,它不会扫描。

So:

$(".deleteBtn").click(function (event) {

    event.preventDefault();

    var id = $(this).closest(".rowshow").data("id");
    var $this = $(this);
    $.ajax({
        type: "POST",
        url: "EditFood.aspx/delete",
        data: "{'id':" + id + "}",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function () {
            $this.closest(".rowshow").remove();
        }
    });
});

Also, Add event.preventDefault() to avoid default action of a.

另外,添加event.preventDefault()以避免a的默认操作。

Live example using setTimeout to simulate the ajax call:

使用setTimeout模拟ajax调用的实例:

$(".deleteBtn").click(function(event) {

  event.preventDefault();

  var id = $(this).closest(".rowshow").data("id");
  var $this = $(this);
  setTimeout(function() {
    $this.closest(".rowshow").remove();
  }, 500);
});

<table>
  <tbody>
    <tr data-id="5" class="rowshow">
      <td>0</td>
      <td>
        <input name="ctl06" type="text" value="قرمه سبزی" />
      </td>
      <td>
        <input name="ctl08" type="text" value="1000" />
      </td>
      <td><a Class="deleteBtn">X</a>
      </td>
    </tr>
    <tr data-id="6" class="rowshow">
      <td>1</td>
      <td>
        <input name="ctl14" type="text" value="قرمه سبزی" />
      </td>
      <td>
        <input name="ctl16" type="text" value="1000" />
      </td>
      <td><a Class="deleteBtn">X</a>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

#2

Try following working JQuery:

尝试以下工作JQuery:

$(document).ready( function() {
   $('.deleteBtn').click(function(event) {
       var $this = $(this);
       
            $this.parent().remove();

    });
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr data-id="5" class="rowshow">
        <td>0</td>
        <td><input name="ctl06" type="text" value="قرمه سبزی" /></td>
        <td><input name="ctl08" type="text" value="1000" /></td>
        <td><a Class="deleteBtn">X</a></td>
    </tr>
    <tr data-id="6" class="rowshow">
        <td>1</td>
        <td><input name="ctl14" type="text" value="قرمه سبزی" /></td>
        <td><input name="ctl16" type="text" value="1000" /></td>
        <td><a Class="deleteBtn">X</a></td>
    </tr>

Check Fiddle here

在这里检查小提琴

#3

Please check following:

请检查以下内容:

$(".deleteBtn").click(function () {
    $(this).parent().parent().fadeOut();
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<table><tr data-id="5" class="rowshow">
        <td>0</td>
        <td><input name="ctl06" type="text" value="قرمه سبزی" /></td>
        <td><input name="ctl08" type="text" value="1000" /></td>
        <td><a Class="deleteBtn">X</a></td>
    </tr>
    <tr data-id="6" class="rowshow">
        <td>1</td>
        <td><input name="ctl14" type="text" value="قرمه سبزی" /></td>
        <td><input name="ctl16" type="text" value="1000" /></td>
        <td><a Class="deleteBtn">X</a></td>
    </tr>
</table>

#1