如何替换HTML元素，同时保持页面上所有其他元素的位置相同

Question

Let's say you're on a third party webpage and so you have no control over the page, except for your javascript.

You want to replace an element with an empty DOM node, but you want the page to maintain the same positioning for all other elements on the page. You don't know what the element will be and what the styles are on the webpage.

If you replace the element with a DIV, and you manually set the width and the height of that div to be the same as the replaced element, then you are almost there. However, you would not know if there are any other styling on the page that would apply to the DIV and mess things up. Also, if the replaced element was floated to the left or right, or was display:inline , then replacing it with a DIV might mess up the position of other elements on the page.

Is there a foolproof way to do this?

Answer 1

Instead of replacing the whole element, you could just throw away its content. However, it could still have borders and background images, not to mention event handlers like mouseover, so there are plenty of awkward cases.