jquery - Div 在 Jquery 的 show hide 命令中没有完全被替换

Question

我有这个代码 https://jsfiddle.net/23h4jrde/2/这允许您在单击按钮时替换 div 内容。我认为以前的内容还没有完全替换，因为当新内容显示时它会向下推到底部。

$('.ctabtn').on('click', function(){
  $(".information").hide();
  $(".ctabtn").hide();
  $('.hosted-cities').show();
});

Answer 1

我不确定你在找什么。但是如果你想删除被隐藏的元素，你可以尝试这样的事情。

   <div ID="wrapper"> //add a wrapper
       <span class="information">     
          <p class="card__text"> 2020 Winter Whiskey Tasting Festival  </p>
          <p class="card__text2"> Sat, January 25, 2020 </p>
          <p class="card__text3"> 4:00 PM – 6:00 PM CST  </p>
       </span>
       <div class="card__btn ctabtn">JOIN US</div>
    </div>

    <div class="hosted-cities">
       <p class="card__text"> Choose your City </p>
       <button class="card__btn" id="" type="button">Dallas</button>
       <button class="card__btn" id="" type="button">Denver</button>
    </div>

jQuery:

$('.ctabtn').on('click', function(){
    $('.hosted-cities').show();
    $('#wrapper').remove(); //removes the div
}); 

已编辑 Fiddle