Html Question posted in
Some basic documentation can be found here.

Html – Div wont disappear

I am trying to set my div1 to be hidden when I click on a vest1 which calls the function vest1(). I cannot find out why it doesn’t work. I have tried with CSS visibility but I want div1 to disappear from the page, not only to be invisible.

i have tried everything but i cannot get the div to disappear

var counter = 1;
setInterval(function() {
  document.getElementById('radio' + counter).checked = true;
  counter++;
  if (counter > 4) {
    counter = 1;
  }
}, 3000);

function radio1() {
  counter = 1;
}

function radio2() {
  counter = 2;
}

function radio3() {
  counter = 3;
}

function radio4() {
  counter = 4;
}

function vest1() {
  const div1 = document.getElementById('div1');
  const div2 = document.getElementById('div2');
  div2.hidden = true;
  div1.hidden = true;
}
<div class="meni">
  <img id="logo" src="logo.png" alt="">
  <span class="meni2">Recenzije</span>
  <span class="meni2">Prodavnica</span>
  <span class="meni2">O nama</span>
  <span class="meni2">Kontakt</span>
  <button class="meni2">SIGNUP</button>
  <button class="meni2">LOGIN</button>
</div>
<div id="div1">
  <div class="slider">
    <div class="slides">
      <input type="radio" name="radio-btn" id="radio1" onclick="radio1()">
      <input type="radio" name="radio-btn" id="radio2" onclick="radio2()">
      <input type="radio" name="radio-btn" id="radio3" onclick="radio3()">
      <input type="radio" name="radio-btn" id="radio4" onclick="radio4()">

      <div class="slide first">
        <img src="graf/4090.jpg" alt="">
      </div>
      <div class="slide">
        <img src="graf/6700.webp" alt="">
      </div>
      <div class="slide">
        <img src="graf/750.webp" alt="">
      </div>
      <div class="slide">
        <img src="graf/4070.webp" alt="">
      </div>
      <div class="navigation-auto">
        <div class="auto-btn1"></div>
        <div class="auto-btn2"></div>
        <div class="auto-btn3"></div>
        <div class="auto-btn4"></div>
      </div>
    </div>

    <div class="navigation-manual">
      <label for="radio1" class="manual-btn"></label>
      <label for="radio2" class="manual-btn"></label>
      <label for="radio3" class="manual-btn"></label>
      <label for="radio4" class="manual-btn"></label>
    </div>
  </div>
</div>
<div id="div2">
  <div class="centar">
    <p class="Novosti">Novosti</p>
  </div>
  <div class="vesti">
    <div class="vest" id="vest1" onclick="vest1()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>
      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">NVIDIA je najavila novu RTX 50 seriju! </p>
        <span style="margin-left: 20px;">Poznata firma NVIDIA je najavila detalje nove generacije grafickih karti. </span>
      </div>
    </div>
    <div class="vest" id="vest2" onclick="vest2()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>

      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">Najbolji odnos cene i kvaliteta!</p>
        <span style="margin-left: 20px;">Istrazili smo koja graficka kartica donosi najbolji odnos u ceni i kvalitetu.</span>
      </div>
    </div>
    <div class="vest" id="vest3" onclick="vest3()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>

      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">NVIDIA donosi graficku karticu koju mozete da overklokujete a da ne razmisljate!</p>
        <span style="margin-left: 20px;">Graficka kartica koja moze da se overklokuje a da ne izgubi garanciju.</span>
      </div>
    </div>
    <div class="vest" id="vest4" onclick="vest4()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>

      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">Bolja graficka kartica sa manje Vrama?!</p>
        <span style="margin-left: 20px;">Graficka kartica pokrece zahtevne igrice iako ima malo vrama?</span>
      </div>
    </div>
    <div class="vest" id="vest5" onclick="vest5()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>

      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">Najjeftinija kartica!</p>
        <span style="margin-left: 20px;">Najbolja graficka kartica koja je u svacijem budzetu.</span>
      </div>
    </div>
    <div class="vest" id="vest6" onclick="vest6()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>

      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">RX 7900 GRE vs RTX 4070 Super sta je bolje?</p>
        <span style="margin-left: 20px;">Koja je bolja graficka kartica od ove dve? </span>

      </div>
    </div>
  </div>
</div>
<p>asd
</p>
Tags:

2

Answers


  1. 0

    You can make it invisible (without taking space) by setting the style display property to none like:

    function vest1() {
    const div1 = document.getElementById('div1');
    const div2 = document.getElementById('div2');   
    div1.style.display = 'none';
    div2.style.display = 'none';
}

    or you can remove the element entirely from the DOM by doing:

    function vest1() {
    const div1 = document.getElementById('div1');
    const div2 = document.getElementById('div2');   
    div1.remove();
    div2.remove();
}

    The first approach gives you the possibility to make the element visible again in case you need that.

    In general it’s always good to check if the element exists before doing this.

    if (div1) {
   div1.remove();
   // etc.
}

    Edit:
    Thanks @tacoshy for the hint!

    While my first suggestion was more the quick’n dirty way the more modern and clean solution would be to set the styles via CSS classes and add or remove these classes depending on what you want to do.

    In your case you might set a CSS class like

    .d-none {
   display: none;
}

    While you add that class via Javascript then:

    function vest1() {
    const div1 = document.getElementById('div1');
    const div2 = document.getElementById('div2');   
    div1.classList.add('d-none');
    div2.classList.add('d-none');
}

    If you use a css framework like Bootstrap or similar the chances are high that such a class already exists (as a helper class) like d-none in Bootstrap.

    Login or Signup to reply.
  2. 0

    To remove div1 from the DOM (from the html), you can call div1.remove() in your code, instead of setting div1.hidden.

    When you do that, you also make your checkboxes go away, so you need to stop your timer as well.

    See the changes marked with "NOTE" in the code snippet below, specifically with your setInterval() call and your vest1() function.

    var counter= 1 ;

// NOTE Save the timer so we can stop it when we remove div1
let counterTimer = setInterval(function(){
  document.getElementById('radio' + counter).checked = true;
  counter++;
  if(counter >4){
    counter=1;
  }
},3000);

function radio1(){
  counter=1;
}

function radio2(){
  counter=2;
}

function radio3(){
  counter=3;
}

function radio4(){
  counter=4;
}

function vest1(){
  const div1 = document.getElementById('div1');
  // const div2 = document.getElementById('div2');
  // div2.hidden=true;

  // div1.hidden=true;
  // NOTE Remove div1 from the DOM completely
  if( div1 ) {
    // Need to stop the timer, since the radio buttons inside div1 will also be removed
    clearInterval( counterTimer )
    div1.remove();
  }
}
    #div1, #div2 {
  margin: 4px;
  border: 1px solid red;
}
  
.vest {
  margin: 4px;
  border: 1px solid blue;
  cursor: pointer;
}
    <div class="meni">
  <img id="logo" src="logo.png" alt="">
  <span class="meni2" >Recenzije</span>
  <span class="meni2" >Prodavnica</span>
  <span class="meni2" >O nama</span>
  <span class="meni2" >Kontakt</span>
  <button class="meni2" >SIGNUP</button>
  <button class="meni2" >LOGIN</button>
</div>
<div id="div1">
  <div class="slider">
    <div class="slides">
      <input type="radio" name="radio-btn" id="radio1" onclick="radio1()">
      <input type="radio" name="radio-btn" id="radio2" onclick="radio2()">
      <input type="radio" name="radio-btn" id="radio3" onclick="radio3()">
      <input type="radio" name="radio-btn" id="radio4" onclick="radio4()">
      
      <div class="slide first">
        <img src="graf/4090.jpg" alt="">
      </div>
      <div class="slide">
        <img src="graf/6700.webp" alt="">
      </div>
      <div class="slide">
        <img src="graf/750.webp" alt="">
      </div>
      <div class="slide">
        <img src="graf/4070.webp" alt="">
      </div>
      <div class="navigation-auto">
        <div class="auto-btn1"></div>
        <div class="auto-btn2"></div>
        <div class="auto-btn3"></div>
        <div class="auto-btn4"></div>
      </div>
    </div>
    
    <div class="navigation-manual">
      <label for="radio1" class="manual-btn"></label>
      <label for="radio2" class="manual-btn"></label>
      <label for="radio3" class="manual-btn"></label>
      <label for="radio4" class="manual-btn"></label>
    </div>
  </div>
</div>
<div id="div2">
  <div class="centar"><p class="Novosti">Novosti</p></div>
  <div class="vesti">
    <div class="vest" id="vest1" onclick="vest1()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>
      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">NVIDIA je najavila novu RTX 50 seriju! </p>
        <span style="margin-left: 20px;">Poznata firma NVIDIA je najavila detalje nove generacije grafickih karti. </span>
      </div>
    </div>
    <div class="vest" id="vest2" onclick="vest2()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>
      
      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">Najbolji odnos cene i kvaliteta!</p>
        <span style="margin-left: 20px;">Istrazili smo koja graficka kartica donosi najbolji odnos u ceni i kvalitetu.</span>
      </div>
    </div>
    <div class="vest" id="vest3" onclick="vest3()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>
      
      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">NVIDIA donosi graficku karticu koju mozete da overklokujete a da ne razmisljate!</p>
        <span style="margin-left: 20px;">Graficka kartica koja moze da se overklokuje a da ne izgubi garanciju.</span>
      </div>
    </div>
    <div class="vest"id="vest4" onclick="vest4()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>
      
      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">Bolja graficka kartica sa manje Vrama?!</p>
        <span style="margin-left: 20px;">Graficka kartica pokrece zahtevne igrice iako ima malo vrama?</span>
      </div>
    </div>
    <div class="vest"id="vest5" onclick="vest5()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>
      
      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">Najjeftinija kartica!</p>
        <span style="margin-left: 20px;">Najbolja graficka kartica koja je u svacijem budzetu.</span>
      </div>
    </div>
    <div class="vest"id="vest6" onclick="vest6()">
      <div class="vestasd2">
        <span class="vestasd">VEST</span>
      </div>
      
      <div class="pozadina-teksta">
        <p style="color: white;font-weight: bold;margin:2px 3px;">RX 7900 GRE vs RTX 4070 Super sta je bolje?</p>
        <span style="margin-left: 20px;">Koja je bolja graficka kartica od ove dve? </span>
        
      </div>
    </div>
  </div>
</div>
<p>asd
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search