tr didn't remove in ajax request.

Question

i m trying to remove tr from table using closest function. this function is working properly out of the $.post request but when same script is used in post request its not working. My Code is

$(".delete_cat").click(function() {
        var idd = $(this).val();

        $.post("<?php echo base_url() ?>category/delete",
            {id:idd},
            function(data) {

                if (data === 1) {
                    var tr = $(this).closest('tr').remove();
                    tr.css("background-color","#FF3700");
                    tr.fadeOut(400, function(){
                        tr.remove();
                    });

                }
            }
            )

    })

`this` will be different when it is called from post `success` function .. see my answer http://stackoverflow.com/a/33095435/2074346 — Kishore Sahasranaman, Oct 13 '15 at 06:24

score 0 · Answer 1 · edited May 23 '17 at 12:06

That is because context of element is lost in ajax call. you can use context option of ajax to set context of clicked .delete-cart element:

   $.post("<?php echo base_url() ?>category/delete",
   {id:idd},
   context:this,
   function(data) {
     if (data === 1) {
         var tr = $(this).closest('tr').remove();
         tr.css("background-color","#FF3700");
         tr.fadeOut(400, function(){
         tr.remove();
     }
   });

Context option in ajax

score 0 · Answer 2 · edited Oct 13 '15 at 06:20

this is having different instance inside post success function

$(".delete_cat").click(function() {
  var that = this
  var idd = $(that).val();

  $.post("<?php echo base_url() ?>category/delete", {
      id: idd
    },
    function(data) {

      if (data === 1) {
        var tr = $(that).closest('tr').remove();
        tr.css("background-color", "#FF3700");
        tr.fadeOut(400, function() {
          tr.remove();
        });

      }
    }
  )

})

Norlihazmey Ghazali · Answer 3 · 2015-10-13T06:24:11.693

0

$(this) inside function is not refer to .delete_cat, but window instead, cache those :

$(".delete_cat").click(function() {
   var $this = $(this);  // <----here
   var idd = $this.val();

    $.post("<?php echo base_url() ?>category/delete",
        {id:idd},
        function(data) {
            if (data === 1) {
                var tr = $this.closest('tr').remove();
                tr.css("background-color","#FF3700");
                tr.fadeOut(400, function(){
                    tr.remove();
                });
            }
   });
});

edited Oct 13 '15 at 06:24

answered Oct 13 '15 at 06:17

Norlihazmey Ghazali

9,000
1
23
40

`.delete_cat` is dynamic element? – Norlihazmey Ghazali Oct 13 '15 at 06:25
Delete – Hamaad Hussain Oct 13 '15 at 06:33
No i mean, is it table are created dynamically? And do you try to alert something on click handler? – Norlihazmey Ghazali Oct 13 '15 at 06:35

tr didn't remove in ajax request.

3 Answers3