DIV“sec2”为空时隐藏“btn 2”

Question

my code is working fine, but I would like to make a change where I didn't find answers just by searching. I'm looking for dynamic data for the sections below, but when I don't have data to populate, I'd like to hide the button, is that possible?

<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display: none;    
}
.shown{
display: block !important;
}
</style>
<script>
var btn1 = document.getElementById("btn1"); 
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");


btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1"); 
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2");
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3");
};
btn4.onclick = function(event){
event.preventDefault();
toggleDivs("sect4");
};


function toggleDivs(s){

document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById("sect4").classList.remove("shown");

document.getElementById(s).classList.add("shown");
}
btn1.focus(); 
btn1.click(); 
</script>

Answer 1

I dont see your HTML tree, so I can't really give an accurate answer. But you can use mutationObserver, so you can observe your target element. If there is no data you can run a function to hide buttons.

Answer 2

Here is a snippet that will hide a button if the associated div is empty:

 const divs=document.querySelectorAll("div"), hideAll=()=>divs.forEach(d=>{ // hide all selected divs if (d.textContent==="") // hide associated button too, if div is empty: document.getElementById(d.id.replace("sect","btn")).style.display="none" d.style.display="none" }); document.onclick=ev=>{ if(ev.target.tagName==="BUTTON") { if (ev.target.id){ hideAll(); document.getElementById(ev.target.id.replace("btn","sect")).style.display="" } else { divs[2].textContent=""; hideAll() } }} hideAll();

 div {background-color:#ddd; padding:10px; margin:6px; border: 1px solid grey}

 <div id="sect1">This is section one</div> <div id="sect2">This is section two</div> <div id="sect3">This is section three</div> <div id="sect4">This is section four</div> <button id="btn1">show one</button> <button id="btn2">show two</button> <button id="btn3">show three</button> <button id="btn4">show four</button> <br><br> <button>empty div#sect3</button>