[英]How can I remove an icon from a table dynamically in javascript?
I want to delete an icon from a table dynamically.我想动态地从表格中删除一个图标。 First, I will display icons on a table.首先,我将在表格上显示图标。 The number of icons displayed depends on the value retrieved from a database.显示的图标数量取决于从数据库中检索到的值。
When I clicked a button to remove the icon, it's not removed.当我点击一个按钮来删除图标时,它并没有被删除。
HTML HTML
<td class="actions">
<a href="" class="icon" id="plus_bintang<?= $santri->id_santri ?>" onclick="add_ubah(<?= $santri->id_santri ?>); return false"> <i class="mdi mdi-plus-square"></i></a>
<a href="" class="icon" id="minus_bintang<?= $santri->id_santri ?>" onclick="remove_ubah(<?= $santri->id_santri ?>); return false"> <i class="mdi mdi-minus-square"></i></a>
<div id="bintang<?= $santri->id_santri ?>">
<input type="hidden" name="nilai[]" value="<?=$santri->nilai?>" id="nilai<?= $santri->id_santri ?>">
<?php for ($i=0; $i <$santri->nilai ; $i++) { ?>
<i class='mdi mdi-star'></i>
<?php } ?>
</div>
</td>
Javascript Javascript
function add_ubah($id = null) {
let bintang = document.getElementById('bintang' + $id);
let count_bintang = bintang.getElementsByTagName('i').length;
if (count_bintang < 5) {
$("#bintang" + $id).prepend("<i class='mdi mdi-star'></i>");
count_bintang = bintang.getElementsByTagName('i').length;
document.getElementById('nilai'+$id).value = count_bintang;
return false;
}else if(count_bintang == 0){
$("#bintang" + $id).prepend("<i class='mdi mdi-star'></i>");
count_bintang = bintang.getElementsByTagName('i').length;
document.getElementById('nilai'+$id).value = count_bintang;
return false;
}else {
return false;
}
}
function remove_ubah($id = null) {
let bintang = document.getElementById('bintang' + $id);
let count_bintang = bintang.getElementsByTagName('i').length;
if (count_bintang > 0) {
document.getElementById('bintang' + $id).removeChild(bintang.childNodes[0]);
count_bintang = bintang.getElementsByTagName('i').length;
document.getElementById('nilai'+$id).value = count_bintang;
} else if(count_bintang == 0) {
return false;
} else{
return false;
}
}
Try removing all spaces inside of your div#bintangXYZ
HTML.尝试删除div#bintangXYZ
HTML 中的所有空格。 Remember that childNodes
returns text nodes too, so sometimes when you click you just remove a whitespace between the stars.请记住childNodes
也会返回文本节点,因此有时当您单击时,您只需删除星星之间的空格。 Also place the <input name="nilai[]>
after all the stars (because you are prepending all the added stars).还要将<input name="nilai[]>
所有星星之后(因为您将所有添加的星星放在前面)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.