Question

我有锚标记，这是我的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>

我希望在点击＆＃34; a＆＃34;之后删除标记ajax成功而不刷新我的页面。这是我的脚本

这是我的剧本

$(".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();
        }
    });
});

Answer 1

两个问题：

在{ajax}中无法访问$(this)，因为this是指Ajax调用的jqXHR对象，而 NOT 是单击的按钮。在ajax调用之前缓存对象，然后使用它。
您需要将.parent(".rowshow")更改为.closest(".rowshow")。 parent仅查看直接父级，但不扫描。

所以：

$(".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();
        }
    });
});

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

实例，使用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>

Answer 2

尝试以下工作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>

检查Fiddle here

Answer 3

请检查以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

如何删除子

3 个答案: