EDIT: I forgot to mention that those TR were created dynamically.
I’m trying to remove a especific TR that is inside a <tbody> when I click in the red X. I can identify the line I just cant remove it.
What I tried:
JavaScript
x
2
1
$('#documento_detalhe tbody').find('tr:eq(line_number)').remove();2
AND
JavaScript
1
2
1
$('#documento_detalhe tbody').children('tr').eq(line_number).remove();2
Any tips on how to select the corret TR? Ill post what i have.
JavaScript
1
6
1
function remove_line(e)2
{3
var line_number = $(e).data('line_number');4
5
$('#documento_detalhe tbody').children('tr').eq(line_number).remove();6
}JavaScript
1
37
37
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
<div class="row margin_top_30">3
<div class="col-md-6">4
<table class="common_table" id="documento_detalhe" class="display" style="width:100%">5
<thead>6
<tr>7
<th style="width: 50px" class="text_center">Linha</th>8
<th style="" class="text_center">Produto</th>9
<th style="width: 80px;" class="text_center">Quantidade</th>10
<th style="width: 80px;margin-left: 10px" class="text_center"></th>11
12
</tr>13
</thead>14
<tbody class="text_center" id="tbody">15
<tr class="text_center">16
<td class="text_center">1</td>17
<td class="text_center">sdfsfrewf</td>18
<td class="text_center">32</td>19
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>20
</tr>21
<tr class="text_center">22
<td class="text_center">1</td>23
<td class="text_center">sdfsfrewf</td>24
<td class="text_center">32</td>25
<td data-line_number="2" onclick="remove_line(this)" class="text_center" style="color:red">x</td>26
</tr>27
<tr class="text_center">28
<td class="text_center">1</td>29
<td class="text_center">sdfsfrewf</td>30
<td class="text_center">32</td>31
<td data-line_number="3" onclick="remove_line(this)" class="text_center" style="color:red">x</td>32
</tr>33
</tbody>34
</table>35
</div>36
37
</div>Advertisement
Answer
First of all, It’s not oneclick, but onclick.
JavaScript
1
6
1
<!-- Wrong: oneclick -->2
<td data-line_number="1" oneclick="remove_line(this)" class="text_center" style="color:red">x</td>3
4
<!-- Fixed: onclick -->5
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>6
That said, the event (e) thats passed to the function can be used to get the desired output.
JavaScript
1
2
1
e.parentNode.remove()2
Will get the paret node (tr) of the cell (td), and remove it as you can test here:
JavaScript
1
3
1
function remove_line(e) {2
e.parentNode.remove()3
}JavaScript
1
36
36
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
<div class="row margin_top_30">3
<div class="col-md-6">4
<table class="common_table" id="documento_detalhe" class="display" style="width:100%">5
<thead>6
<tr>7
<th style="width: 50px" class="text_center">Linha</th>8
<th style="" class="text_center">Produto</th>9
<th style="width: 80px;" class="text_center">Quantidade</th>10
<th style="width: 80px;margin-left: 10px" class="text_center"></th>11
12
</tr>13
</thead>14
<tbody class="text_center" id="tbody">15
<tr class="text_center">16
<td class="text_center">1</td>17
<td class="text_center">sdfsfrewf</td>18
<td class="text_center">32</td>19
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>20
</tr>21
<tr class="text_center">22
<td class="text_center">2</td>23
<td class="text_center">sdfsfrewf</td>24
<td class="text_center">32</td>25
<td data-line_number="2" onclick="remove_line(this)" class="text_center" style="color:red">x</td>26
</tr>27
<tr class="text_center">28
<td class="text_center">3</td>29
<td class="text_center">sdfsfrewf</td>30
<td class="text_center">32</td>31
<td data-line_number="3" onclick="remove_line(this)" class="text_center" style="color:red">x</td>32
</tr>33
</tbody>34
</table>35
</div>36
</div>We can use that Javascript call on the onclick itself so we don’t need the function. Change the event (e) to the current element this:
JavaScript
1
2
1
<td data-line_number="2" onclick="this.parentNode.remove()" class="text_center" style="color:red">x</td>2
JavaScript
1
36
36
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
<div class="row margin_top_30">3
<div class="col-md-6">4
<table class="common_table" id="documento_detalhe" class="display" style="width:100%">5
<thead>6
<tr>7
<th style="width: 50px" class="text_center">Linha</th>8
<th style="" class="text_center">Produto</th>9
<th style="width: 80px;" class="text_center">Quantidade</th>10
<th style="width: 80px;margin-left: 10px" class="text_center"></th>11
12
</tr>13
</thead>14
<tbody class="text_center" id="tbody">15
<tr class="text_center">16
<td class="text_center">1</td>17
<td class="text_center">sdfsfrewf</td>18
<td class="text_center">32</td>19
<td data-line_number="1" onclick="this.parentNode.remove()" class="text_center" style="color:red">x</td>20
</tr>21
<tr class="text_center">22
<td class="text_center">2</td>23
<td class="text_center">sdfsfrewf</td>24
<td class="text_center">32</td>25
<td data-line_number="2" onclick="this.parentNode.remove()" class="text_center" style="color:red">x</td>26
</tr>27
<tr class="text_center">28
<td class="text_center">3</td>29
<td class="text_center">sdfsfrewf</td>30
<td class="text_center">32</td>31
<td data-line_number="3" onclick="this.parentNode.remove()" class="text_center" style="color:red">x</td>32
</tr>33
</tbody>34
</table>35
</div>36
</div>