如果页面上存在div元素，则隐藏其他元素

Question

I have a dynamic web form, I'd like to detect if an element is visible; and if it is hide another element of mine. I have the below attempt, but this is not working stabilily; ie the element isn't always hiding. A better technique out there?

setInterval( myValidateFunction2, 1000);

function myValidateFunction2 () {   
    var inElgbl =  document.getElementById('field_52_116');
    if (typeof(inElgbl) != 'undefined' && inElgbl != null)
    {
        document.getElementById('field_52_24').style.display = "none";
    }   
};  

---

It is by default display: none; but may become display: block; if it becomes display: block; I would like to display: none; my other div elem.

Answer 1

Consider an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want. Try this:

setInterval( myValidateFunction2, 1000);

function myValidateFunction2 () {   
    var inElgbl =  document.getElementById('field_52_116');
    if (inElgbl.offsetWidth <= 0 && inElgbl.offsetHeight <= 0)
    {
        document.getElementById('field_52_24').style.display = "none";
    }   
}; 

Answer 2

Probably the most stable way to do this would be using a DOM Mutation Observer and setting it up to watch the document or section of the document that could get the element in question.

In the example below, I'll set up an observer to watch an initially empty div and after I've set it up, I'll dynamically add the element we're supposed to be on the lookout for. You'll see that the element does not wind up getting displayed.

 // Select the node that will be observed for mutations var targetNode = document.getElementById('parent'); // Options for the observer (which mutations to observe) var config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed function callback(mutationsList, observer) { // We only need to test to see if node is truthy, which it will be if it exists if (document.getElementById('field_52_116')){ document.getElementById('field_52_24').style.display = "none"; console.log("Node detected! Removing...."); } }; // Create an observer instance linked to the callback function var observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); // So, we'll add the node to test let newNode = document.createElement("div"); newNode.textContent = "I'm here so the other node should be hidden!"; newNode.id = "field_52_116"; targetNode.appendChild(newNode); // Later, you can stop observing if needed // observer.disconnect(); 

 <div id="parent"></div> <div id='field_52_24'>ELement to hide</div>