JQUERY, AJAX -- 我的 <tr> 没有被删除

Question

我想在单击按钮时删除并删除一个 tr，但它并没有消失（我从数据库中删除它的功能工作正常，它只是停留在屏幕上直到我刷新）。

好像没有取好ID

有什么提示吗？

HTML

 <tbody> 
     <?php foreach ($elementos as $elementos): ?>
     <tr class="tr_test" data-id="<?php echo $elementos['ELDI_Id']; ?>">
     ...

AJAX

 $.ajax({
          url: $("#base_url").attr("valor") + "diccionarios/eliminar_elementos_diccionario",
          type: 'POST',
          data: { id:id_eldi },
          success: function(response){
   // THIS WORKS FINE, BUT I'M ASKED TO DO IT THE OTHER WAY
          /* $(el).closest('tr').fadeOut(800, function(){ 
               $(this).remove();
          }); */

          $('tr[data-id="' + id_eldi + '"]').fadeOut(800, function(){ 
                        $(this).remove();
           });     
      }
});

感谢您的宝贵时间！

编辑

已填充 table 的 html，如评论中所述：

<section class="content">
<div class="container-fluid">
    <div class="block-header">
        <div class="alert alert-info">
            <strong>
                Elementos del Diccionario 2                </strong>
            <!-- <strong>
                Elementos del Diccionario                </strong>  -->
        </div>    
    </div>
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">                   
                <div class="body">
               <!--  <div>
                    <a class="nav-link" href="http://localhost/bpg/diccionarios/nuevo_elemento_diccionario">Añadir elemento</a>
                </div> -->
                <!-- BOTÓN AÑADIR ELEMENTO MODAL -->
                    <a title="Añadir" style="margin-bottom:20px;" class="btn btn-primary" data-toggle="modal" data-target="#Modal_Add">
                        <i class="material-icons">add</i>Nuevo elemento  
                    </a>
                    <div class="table-responsive">
                        <table id="tabla-elementos" class=" display table table-bordered table-striped table-hover tabla-usuarios">
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Display</th>
                                    <th>Acciones</th>
                                    <!-- <th>Acciones</th> -->
                                </tr>
                            </thead>
                            <tbody> 
                                                                        <tr class="tr_test" data-id="347">
                                        <td>prueba_1</td>
                                        <td>Prueba Uno</td>
                                        <td>
                                            <span class="btn btn-default editar_elemento" id='347' value="347">
                                                <a href="http://localhost/bpg/diccionarios/elemento_diccionario/347" title="Editar">
                                                    <i class="material-icons">edit</i>
                                                </a>
                                            </span>
                                        <span class="btn btn-default borrar_elemento" id='347' value="347">
                                                <i class="material-icons">delete_outline</i>    
                                            </span>
                                        </td>
                                    </tr>
                                                                        <tr class="tr_test" data-id="348">
                                        <td>prueba_2</td>
                                        <td>Prueba Dos</td>
                                        <td>
                                            <span class="btn btn-default editar_elemento" id='348' value="348">
                                                <a href="http://localhost/bpg/diccionarios/elemento_diccionario/348" title="Editar">
                                                    <i class="material-icons">edit</i>
                                                </a>
                                            </span>
                                        <span class="btn btn-default borrar_elemento" id='348' value="348">
                                                <i class="material-icons">delete_outline</i>    
                                            </span>
                                        </td>
                                    </tr>
                                                                        <tr class="tr_test" data-id="351">
                                        <td>prueba_3</td>
                                        <td>Prueba Tres</td>
                                        <td>
                                            <span class="btn btn-default editar_elemento" id='351' value="351">
                                                <a href="http://localhost/bpg/diccionarios/elemento_diccionario/351" title="Editar">
                                                    <i class="material-icons">edit</i>
                                                </a>
                                            </span>
                                        <span class="btn btn-default borrar_elemento" id='351' value="351">
                                                <i class="material-icons">delete_outline</i>    
                                            </span>
                                        </td>
                                    </tr>
                                                                        <tr class="tr_test" data-id="353">
                                        <td>prueba_4</td>
                                        <td>Prueba Cuatro</td>
                                        <td>
                                            <span class="btn btn-default editar_elemento" id='353' value="353">
                                                <a href="http://localhost/bpg/diccionarios/elemento_diccionario/353" title="Editar">
                                                    <i class="material-icons">edit</i>
                                                </a>
                                            </span>
                                        <span class="btn btn-default borrar_elemento" id='353' value="353">
                                                <i class="material-icons">delete_outline</i>    
                                            </span>
                                        </td>
                                    </tr>
                                                                </tbody>
                        </table>
                    </div>
                    <a href="http://localhost/bpg/diccionarios/lista_diccionarios">Volver a Diccionarios</a>
                </div>                                                                               
            </div>
        </div>
    </div>
</div>

Answer 1

我不确定这是否是你的问题的原因，但你的 HTML/PHP 不正确，它应该是：

 <tbody> 
     <?php foreach ($elementos as $elemento): ?>
     <tr class="tr_test" data-id="<?php echo $elemento['ELDI_Id']; ?>">
     ...

Answer 2

尝试添加它的 table 父级作为标识符：

$('button#btn').on('click', function() {
  $('table#table tr[data-id="1"]').fadeOut(800, function(){ 
    $(this).remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tbody>
    <tr data-id="1">
      <td>row</td>
    </tr>
  </tbody>
</table>

<button type="button" id="btn">
  remove
</button>

仅使用 tr[data-id=""] 对于 DOM 来说可能太宽泛，无法找到该元素。

Answer 3

已找到解决方案

我没有将数据 ID 分配给新的附加行。

JQUERY/AJAX

淡化并移除 tr:

$("tr[data-id-fila="+theID+"]").fadeOut(800, function(){ 
                            $(this).remove();
                        });

新附加行（AJAX 使用 insert_id() 从模型和控制器获取结果）

var html = 
                    '<tr data-id-fila="' + result.newID +'">'+
..............

JQUERY, AJAX -- 我的 <tr> 没有被删除

JQUERY, AJAX -- My <tr> isn't removed

html

ajax

custom-data-attribute

编辑

已找到解决方案

JQUERY/AJAX