I apologize if it is a duplicate question, but I googled first without getting a useful answer.

Scenary

I was doing a search results display work, and every search result has a button that renders tooltips, here is the simplified code, they are already working fine for me:

let searchAndDisplayResults = (function () {
    let tooltips;
    return (key) => {
        // search results container
        let searchContainer = $('.search-results-container');
        // clear elements first
        searchContainer.html('');
        // get search results information array
        let searchedResultsArray = getSearchedResults(key);
        // render search results to page(simplified)
        searchedResultsArray.forEach((ele) => {
              searchContainer.append(`<div>${ele}</div><i class='bi-plus' data-bs-toggle="tooltip" title="Some hint for this button"></i>`);
        }
        // enable tooltip
        tooltips = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')).map(tooltipTriggerEl => { return new bootstrap.Tooltip(tooltipTriggerEl) });
    }
})();

Note: the code that enables tooltips above is from here.
Every time new search key was passed into the function, old search results' elements will be destroyed and new search results will be re-rendered, but it seems it remains variable tooltips not to delete every time search results were re-rendered.

Question

So in order to save browser memory consuming, I wonder if I need to delete tooltips array everytime search results were re-rendered? For example, should I use code like this below to destroy variable tooltips everytime new search results to be rendered?

if (tooltips != null) {
    for (let tooltip of tooltips) {
        delete tooltip;
    }
}

CodePudding user response：

No, you don't need to. Doing tooltips = something will remove the reference from the old tooltips array. As long as there aren't any other references to tooltips, it will be garbage collected.