CODEWITHSUNDEEP
javascriptjquery
CostCare
CostCare

Reputation: 215

remove table within <tbody> in javascript

I have a javascript function that dynamically fills the table content from a mySql database:

function getTop5() { // onchange        
    //showLoader();

    //setTimeout(function() {
        var funcid = "get_top_5";
        var er = rangeM3Slider.noUiSlider.get();
        var zv = $("#selectzv").val();
        var zp = $("#selectzp").val();

        var jqxhr = $.getJSON('functions/getdata.php', {
            "funcid": funcid,
            "er": er,
            "zp": zp,
            "zv": zv
        }).done(function(dataPrices) {
            //hideLoader();
            if (dataPrices == null) {
                bootbox.alert("Er is geen data bekend");
            } else {
                //$('#top5').remove();
                var table = '';
                var alert_system = '';
                for (var i = 0; i < dataPrices.length; i++) {
                    //table += '<option value="'+ datadiagnoses[i].diagnose_code + '">' + datadiagnoses[i].diagnose_code + '</option>';
                    switch (dataPrices[i].alert_system) {
                        case "OVER":
                            alert_system = '<span class="label label-success">EIGEN RISICO OVER</span>';
                            break;
                        case "WEG":
                            alert_system = '<span class="label label-danger">EIGEN RISICO WEG</span>';
                            break;
                    }
                    table += '<tr>' + '<td align="center">' + dataPrices[i].zkh_img + '</td>' + '<td align="center">' + dataPrices[i].zkh + '</td>' + '<td align="center">' + dataPrices[i].price + '</td>' + '<td align="center">' + dataPrices[i].verschil + '</td>' + '<td align="center">' + alert_system + '</td>'
                        //+ '<td align="center">'+ (dataContractMonitor[i].omzet - dataContractMonitor[i].vulling) +'</td>'
                        + '</tr>';
                }
                $('#top5').append(table);
            }
        })
        .fail(function() {
            hideLoader();
            bootbox.alert("Er kon geen data verkregen worden uit de database");
        }); //When getJSON request fails
    //}, 0);
}

What I want now is to fitst delete all the table content within the body before appending new data. Otherwise all the old data is still visible and the new data is appended under the old data :-(. I tried $("top5").remove(); at the beginning of the function but then nothing happens anymore. Any help is much appreciated.

Upvotes: 1

Views: 929

Answers (2)

Amar Singh
Amar Singh

Reputation: 5622

use .empty();

Description: Remove all child nodes of the set of matched elements from the DOM.

$("your table id or class ").empty();

where as .remove() will remove the element itself.

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337700

The method to clear the content of an element is empty():

$('#top5').empty().append(table);

However, you could just overwrite the content of the element, which will do both actions at the same time using html():

$('#top5').html(table);

Upvotes: 4

Related Questions