如何在javascript中動態地從表格中刪除圖標？

Question

我想動態地從表格中刪除一個圖標。 首先，我將在表格上顯示圖標。 顯示的圖標數量取決於從數據庫中檢索到的值。

當我點擊一個按鈕來刪除圖標時，它並沒有被刪除。

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

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;
    }
}

Answer 1

嘗試刪除div#bintangXYZ HTML 中的所有空格。 請記住childNodes也會返回文本節點，因此有時當您單擊時，您只需刪除星星之間的空格。 還要將<input name="nilai[]>所有星星之后（因為您將所有添加的星星放在前面）。