Question

I’m new to JQuery/Javascript. Have a JSON object that contains an array of strings I want to add to an unordered list. First I need to remove all existing li children from the ul, then I want to add each element of my string array as a li – but I think it will be important to add them all at the same time to avoid flicker from redraw?

Anyway, I don’t know how to do it. I’m seeing examples of bits and pieces and have created the following code, but it has problems. It seems to remove all li children and it will add a li, but it keeps overwriting the last li added.

var features = product.Attributes.Features
$('ul.feature').children('li').each(function () { $(this).remove(); });
if (features) {
    var li = $('<li></li>');
    for (var feature in features) {
        $('ul.feature').append(li);
        $(li).text(features[feature]);
    }
}

var features is an array. I tried using if (features.Length > 0) { but Length always shows undefined when I do that.

Answer 1

Remove All li:

$('ul.feature').find('li').remove();

Add an li:

var liText = "Li Text";
$('ul.feature').append('<li>'+liText+'</li>');