Remove An Item From Datalist

I have a working Ajax call and function that populates a datalist. The datalist is used to select from a finite list an addition to an UL element on the page. Once I add one from

Solution 1:

Teemu's JsFiddle works fine. However, it's normally better to avoid recursion, and multiple DOM queries when not required.

Here is an edit that only requires a single DOM query, and is iterative. (Note decrement before index because this is a zero based list)

    clearChildren = function (parent_id) {
        var parent = document.getElementById(parent_id);
        var childArray = parent.children;
        var cL = childArray.length;
        while(cL > 0) {
            cL--;
            parent.removeChild(childArray[cL]);
        }
    };

(In JSFiddle on MacBookPro I saved 10 ms - from 15 ms total - on a list of 500 elements, but could be more dramatic with larger DOM's on mobile).

Solution 2:

If list_str really is OK, your code works. You can check it in action at jsFiddle.

The most general reason for a behaviour you've described, is that your code refreshes the page. If you remove type="button" from the "Change options" button in the linked fiddle, you'll get an error (due to the fiddle itself). In your page you probably have something similar invoking populate_datalist_from_array(). Notice, that also hitting Enter on an active text input will do submit/refresh.