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

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