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

Question

I want to and remove a tr when I click a button, but it doesn't disappear (my function to delete it from the DB works fine, it just stays in the screen until I refresh).
It's like it doesn't take the ID properly.
Any hints?
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();
});
}
});
Thanks for your time!
EDIT
Populated table's html, as asked in a comment:
<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>
Volver a Diccionarios
</div>
</div>
</div>
</div>
</div>

Answer 1

I'm not sure if it's the cause of your problem, but your HTML/PHP is incorrect, it should read:
<tbody>
<?php foreach ($elementos as $elemento): ?>
<tr class="tr_test" data-id="<?php echo $elemento['ELDI_Id']; ?>">
...

Answer 2

try add it's table parent as identifier:
$('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>
only using tr[data-id=""] might be too broad for the DOM to find that element.

Answer 3

SOLUTION FOUND
I wasn't assigning data-id to the new appended rows.
JQUERY/AJAX
Fade and remove the tr:
$("tr[data-id-fila="+theID+"]").fadeOut(800, function(){
$(this).remove();
});
New appended row (AJAX gets result from model and controller using insert_id())
var html =
'<tr data-id-fila="' + result.newID +'">'+
..............