如何在一秒钟后删除 div 并在 jquery 中更改另一个宽度

Question

我需要在 1 秒后从 DOM 中删除一个 div，我发现了如何使用 CSS 隐藏，但是这个 div 的问题仍然存在DOM.

那么如何从 DOM 中删除这个 Div 并使另一个成为 width:100% 呢？

css:

.header {
width:30%;
}

.sub-header {
width:70%;
}

html:

<div class="header">
 I need be removed not hided from DOM after 1 second
</div>

<div class="sub-header">
 I need be 100% after 1 second
</div>

Answer 1

好好计划你的CSS。您可以使用 setTimeout 添加 class 并进行更改。

setTimeout(function () {
  document.body.classList.add("after");
}, 1000);

.header {
  width: 30%;
  float: left;
}
.sub-header {
  width: 70%;
  float: left;
}

.after .header {
  display: none;
}

.after .sub-header {
  width: 100%;
  float: none;
}

<div class="header">
  I need be removed not hided from DOM after 1 second
</div>

<div class="sub-header">
  I need be 100% after 1 second
</div>

Answer 2

使用 setTimeout() 并根据需要应用 animate()。

setTimeout(function(){
  $('.header').remove();
  $('.sub-header').animate({
                   width: '100%',
                   marginLeft: '40%'
              });  
}, 1000);

setTimeout(function(){
  $('.header').remove();
  $('.sub-header').animate({
                   width: '100%',
                   marginLeft: '40%'
              });  
}, 1000);

.header {
width:30%;
}

.sub-header {
width:70%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
 I need be removed not hided from DOM after 1 second
</div>

<div class="sub-header">
 I need be 100% after 1 second
</div>

Answer 3

setTimeout(
  () => {
    const elHeader = document.querySelector('.header');
    const elSubHeader = document.querySelector('.sub-header');
    elHeader.parentNode.removeChild(elHeader);
    elSubHeader.classList.add('sub-header_wide');
  },
  1000
);

.header {
  background: red;
  width:30%;
}
.sub-header {
  background: blue;
  transition: width 0.3s;
  width:70%;
}
.sub-header_wide {
  width: 100%;
}

<div class="header">
 I need be removed not hided from DOM after 1 second
</div>

<div class="sub-header">
 I need be 100% after 1 second
</div>

Answer 4

使用settimeout()

setTimeout(function(){
  $('div.header').remove();
  $('div.sub-header').css("width: 100%");  
  $('div.sub-header').slideDown("300")
}, 1000);

1000是以毫秒计算的

如何在一秒钟后删除 div 并在 jquery 中更改另一个宽度

How to remove a div after a second and make other one change in width in jquery

javascript

jquery

dom

settimeout

jquery-animate