Make a DOM Element "Undeletable"?

Question

Is there a way to protect an element from removal from tree, be it via JavaScript or even Browser Developer Tools?

Or at least, catch the event and recreate that back?

Answer 1

You cannot make a DOM element undeletable.

About all you can do is to regularly check (on various events or timers) to see if the DOM element is still there. In some modern browsers, you can get a notification when part of the DOM is changed (see MutationObserver).

If you explain what you're really trying to accomplish, we could perhaps give you other ideas on solving your issue.

But, you should know that you cannot control what goes on in your web page in any way. Your scripts can be modified. Your HTML can be modified. Even if you ran a timer to test for something or had some code to be notified when the DOM changed (which is possible in some modern browsers), people could simply disable or replace that code. If you're trying to guarantee that something is always sent to your server or that data is in a particular form when sent to the server, the ONLY place to implement that logic securely is on the server itself. You must protect the server by validating all incoming data on the server and reject invalid requests.