codeigniterでajax経由で削除した後のデータテーブルの行（tr）を隠す

Question

codeigniterでレコードを削除しようとしています。ajaxを呼び出しています。削除機能が正常に動作している私の問題は、削除後に行を非表示にすることです。私は、関数コンテキスト内の少しトリッキーかもしれません

<script> 
    function remove_cart(itemid) { 
    event.preventDefault(); 
    alert("Delete you really want to delete?"); 
    var id = $(this).attr('id'); 
    var btn = this; 
    alert(btn); 
    $.ajax({ 
     type: 'POST', 
     url: '<?php echo site_url("admin/careers/delete/' + itemid + '")?>', 
     data: { 
     id: itemid 
     }, 
     success: function(Success) { 
     $(btn).closest('tr').fadeOut("fast"); 

     } 
    }); 
    } 
</script> 

ビュー

<a onclick="remove_cart('<?php echo $info['id']; ?>')" id="id">test</a> 

表

<table id="example1" class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Post applied</th> 
      <th>Phone</th> 
      <th>Resume</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <?php foreach ($jobs as $info) {?> 
     <tr> 
      <td> 
       <?php echo $info['fname'];?> </td> 
      <td> 
       <?php echo $info['post_applied'];?> </td> 
      <td> 
       <?php echo $info['phone'];?> </td> 
      <td><a href="http://abravmsd.com/uploads/<?php echo $info['resume'];?>" target="_blank">Download</a> </td> 
      <td> 
       <a href="<?php echo base_url();?>admin/careers/delete/<?php echo $info['id']; ?>" class="delete">Delete</a> 
       <a onclick="remove_cart('<?php echo $info['id']; ?>')" id="id">test</a> 
      </td> 
     </tr> 
     <?php } ?> 
    </tbody> 
    <tfoot> 
    </tfoot> 
</table> 

Answer 1

thisビューでブートストラップ・データ・テーブルを使用しています。あなたの質問のためにMDN documentation for this

をチェックアウト、remove_cartはインラインリスナーであると呼び出されたときに、thisはwindow（グローバルオブジェクト）に設定されています。

は、現在の要素をクリックするには、次のいずれかの方法は次のようになります。

var btn = event.target; 

ここでデモです：

（簡単にするために、私はsetTimeoutでajax呼び出しを置き換えることだし、ハードがあります

function remove_cart(itemid) { 
 
    event.preventDefault(); 
 
    var btn = event.target; 
 
    setTimeout(function() { 
 
    $(btn) 
 
     .closest("p") 
 
     .fadeOut("fast"); 
 
    }, 100); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>This will be fade out after some time... <a href="" onclick="remove_cart('123')" id="id">test</a></p>

別A）特定の場所で符号化pproachは、jQueryの.on('click')メソッドまたはjs 'addEventListenerメソッドを使用してイベントハンドラをバインドすることです。これらはウェブ上で簡単に入手できます。彼らを見上げて！

Answer 2

これを試しましたか？

あなたは例えばそれへのid =「ID」あなたの情報を使用して[「ID」]を追加する必要がありますので削除されたテーブルの行を識別するために必要

$(btn).closest('tr').hide(); 

Answer 3

：その後で、あなたの成功の機能を変更

foreach ($jobs as $info) { ?> 
    <tr id="info_row<?= info['id'] ?>"> 
     <td><?php echo $info['fname'];?> </td> 
     <td><?php echo $info['post_applied'];?> </td> 
     <td><?php echo $info['phone'];?> </td> 
     <td><a href="http://abravmsd.com/uploads/<?php echo $info['resume'];?>" target="_blank">Download</a> </td> 
     <td> 
      <a href="<?php echo base_url();?>admin/careers/delete/<?php echo $info['id']; ?>" class="delete">Delete</a> 
      <a onclick="remove_cart('<?php echo $info['id']; ?>')" id="id">test</a> 
     </td> 
    </tr> 
} 

をこれにAJAX呼び出しは：

$('#info_row' + itemid).fadeOut(300, function() { $(this).remove(); }); 

それをフェードアウトするために追加されたテーブルの行IDを使用し、それが隠されていた後、それは、DOMから行を削除します。

注意：remove_cartリンクでid = "id"を削除する必要があります。指定されたidを持つページには1つの要素しか存在しないはずです。このスタイルのリンクをどうにかしてclass = "id"に変更してください。