Delete Elements from Existing HTML code, Not Just the DOM, Using JavaScript

Language Help JavaScript
1

How do I permanently delete existing elements from the HTML code rather than just remove them from the DOM?

My JS code searches for records that met specific criteria. These records are then automatically added to the HTML page to be displayed to the user. The added HTML code consists of a parent and three children for each returned record.

When the user performs a new search, all HTML code created from the prior search should be deleted.

Everything I have tried so far, such as remove() and removeChild, only removes the elements from the DOM, but the associated HTML code still exists even though it’s no longer needed.

The code below only removes elements from the DOM. The code selects the existing parent element and removes the added child element, which contains three grandchildren.

const existingRecords = document.getElementById("recordlist");  
const removeRecords = () => {
while(existingRecords.firstChild) {
  existingRecords.removeChild(existingRecords.firstChild);
}
}
removeRecords();

Also tried:

const deleteElements = document.getElementsByClassName("recordlist");
const removeHTML = () => {
while (deleteElements.length > 0) {
deleteElements[0].remove();
}
}
removeHTML();

Any suggestions are much appreciated.

-John

2

As one would expect, refreshing the page restores the removed elements. The DOM is reconstructed from either the document held in the browser cache, or from a freshly downloaded source page requested from the server.

We cannot manipulate the original code of the page, and nor should we be able to as that would be akin to editing the source. There is only control over the session, not the source.

4 Likes
3

Hi MTF,

I thought I was missing something because it strikes me as odd that the HTML code continues to grow after every search by retaining HTML data that is no longer required. How does this not lead to elevated storage costs and deteriorating code performance over the long-term? How is this handled in practice?

Thanks.

-John

4

The only way to change a source file is to edit it via FTP or other SSL connection to the server. The file needs to be edited either right at the server, or on a local machine and re-uploaded. In other words, the file size does not change, even while the document in the DOM may be changing during each session. It still reverts to the original when requested again.

Also note, and more importantly, the DOM does not exist on the server, but on the client. It is in the user’s computer memory. As far as storage, that is not an issue given even small hosting packages have literally gobs of storage space and practically unlimited DB space. The only thing that costs is bandwidth, and then only for large sites that have millions of page views per month and serve out GB of data every week or day. That’s where the expense is.

Now deteriorating code performance is caused more by having non-optimized media, and inefficient scripting. Nothing to do with the DOM, but the site construction and how well it is developed and maintained. There is no long term deterioration, it is either already performing badly, or it is not. That will not change.

2 Likes
5

Thanks mtf. Your response clarifies a lot of questions I had.

2 Likes