CODEWITHSUNDEEP
javascriptjqueryhtml
Alireza
Alireza

Reputation: 2740

How can I delete parent after click event on child

I have anchor tag and this is my 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

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

Upvotes: 2

Views: 141

Answers (3)

Aftab Muni
Aftab Muni

Reputation: 171

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>

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20626

Two issues:

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

  2. You need to change .parent(".rowshow") to .closest(".rowshow"). parent only looks at the immediate parent, it doesn't scan up.

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.

Live example using setTimeout to simulate the ajax call:

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

Upvotes: 2

ketan
ketan

Reputation: 19341

Try following working 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

Upvotes: 0

Related Questions