在 .load 调用填充子 div 后删除父 div

Question

我有一个页面，我想每 10 秒轮换一次博客文章，并每 5 分钟刷新“文本容器”中的内容。

我似乎无法弄清楚的问题是，为什么一旦加载调用完成，div“主容器”就会从页面中完全删除？！？

如果运行该代码片段，您可以看到主容器（黑色区域）存在一秒钟，然后消失。在我的本地版本中，检查器显示主容器已从标记中删除。

编辑：我注意到嵌入的代码片段没有显示与本地和 jsFiddle 相同的内容。 这是显示该行为的 JsFiddle 链接。

$(document).ready(function() {
  reloadPosts();

  //slider
  setInterval(function() {
    $("#text-container p").css("opacity", "0");
    $("#text-container p:eq(" + i + ")").css("opacity", "1");
    if (i == $('#text-container p').length - 1) {
      i = 0;
    } else {
      i++;
    }
  }, 10000);
});

var timeout = setTimeout(reloadPosts, 300000);

function reloadPosts() {
  $('#text-container').load('https://www.textise.net/showText.aspx?strURL=google.com', function() {
    $(this).unwrap();
    timeout = setTimeout(reloadPosts, 300000);
  });
}

#main-container {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border: 3px solid black;
  border-radius: 15px;
  width: 650px;
  top: 245px;
  bottom: 10px;
  left: 45px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

#main-container h2 {
  text-align: center;
}

#main-container img {
  position: unset;
  bottom: 120px;
  left: 500px;
  padding-bottom: 20px;
}

#text-container {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#text-container p {
  position: absolute;
  opacity: 0;
  padding: 0 20px 0 20px;
  transition: opacity 1s ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">
  <h2>ANNOUNCEMENTS</h2>
  <div id="text-container"></div>
</div>

Answer 1

只需删除

unwrap()

行：

$(document).ready(function() {
    var i = 0;

    reloadPosts();

    // slider
    setInterval(function() {
      $("#text-container p").css("opacity", "0");
      $("#text-container p:eq(" + i + ")").css("opacity", "1");
      if (i == $('#text-container p').length - 1) {
        i = 0;
      } else {
        i++;
      }
    }, 10000);

    // reload content every 5 minutes
    var reloadInterval = setInterval(reloadPosts, 300000);

    function reloadPosts() {
      $('#text-container').load('https://www.textise.net/showText.aspx?strURL=google.com', function() {
        
      });
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  #main-container {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    border: 3px solid black;
    border-radius: 15px;
    width: 650px;
    top: 245px;
    bottom: 10px;
    left: 45px;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
  }

  #main-container h2 {
    text-align: center;
  }

  #main-container img {
    position: unset;
    bottom: 120px;
    left: 500px;
    padding-bottom: 20px;
  }

  #text-container {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
  }

  #text-container p {
    position: absolute;
    opacity: 0;
    padding: 0 20px 0 20px;
    transition: opacity 1s ease-in;
  }
</style>

<div id="main-container">
  <h2>ANNOUNCEMENTS</h2>
  <div id="text-container"></div>
</div>