Restore removed element with jquery

Question

The element div.mega-posts is inside a menu, nav, this element, when depending on the resolution, goes into the element ul#overflow where it is not necessary, and then we remove with .remove(). So far everything, the problem now is back with div.mega-posts to its original location. It only comes back when the page is updated. I want to remove this element only when it is inside the ul#overflow.

PS: I would not refuse a solution in DOM.

var mainNav = $( 'nav ul > li.more > ul#overflow' ); mainNav.find( 'div.mega-posts' ).remove();

window.onresize = navigationResize;
navigationResize();

function navigationResize() {  
  $('#nav li.more').before($('#overflow > li'));
  
  var $navItemMore = $('#nav > li.more'),
  		$navItems = $('#nav > li:not(.more)'),
      navItemMoreWidth = navItemWidth = $navItemMore.width(),
      windowWidth = $(window).width(),
      navItemMoreLeft, offset, navOverflowWidth;
  
  $navItems.each(function() {
    navItemWidth += $(this).width();
  });
  
  navItemWidth > windowWidth ? $navItemMore.show() : $navItemMore.hide();
    
  while (navItemWidth > windowWidth) {
    navItemWidth -= $navItems.last().width();
    $navItems.last().prependTo('#overflow');
    $navItems.splice(-1,1);
  }
  
  navItemMoreLeft = $('#nav .more').offset().left;
  navOverflowWidth = $('#overflow').width();  
  offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth;
    
  $('#overflow').css({
    'left': offset
  });
}

body {
  font-family: lato,arial;
  overflow-y: scroll;
}
nav {
  background: #c00;
  overflow: hidden;
}
.mega-posts {
  height:200px;
  border:5px solid green;
  background:#ddd;
}
nav ul {
  margin: 0 0 2em;
}
nav ul li {
  float: left;
  list-style:none;
  padding:0
}
nav ul li.more {
  width: 3em;
  text-align: center;
  display: none;
}
nav ul li.more:hover ul#overflow {
  opacity: 1;
  visibility: visible;
}
nav ul li a,
nav ul li span {
  display: block;
  background: #c00;
  color: #fff;
  text-decoration: none;
  padding: 1em;
  cursor: pointer;
  transition-duration: .3s;
}
nav ul li a:hover,
nav ul li span:hover {
  background: #e00;
}
nav ul ul {
    position: absolute;
    top: auto;
    left: auto;
    overflow: inherit;
    padding: 0;
    word-wrap: break-word;
    z-index: 99;
}

nav ul ul ul {
    top: 0;
    left: 100%;
    width: 200px;
}

nav ul ul li {
    float: none;
    width: 200px;
    position: relative;
}
nav ul ul li  {
    word-wrap: break-word;
}
nav ul ul,
nav ul#overflow li ul {
    display: none
}
nav ul li:hover>ul,
nav ul#overflow li:hover > ul {
    display: block;
}
nav #overflow {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  text-align: left;
  transition-duration: .3s;
}
nav #overflow li {
  float: none;
}
nav #overflow li a {
  background: #00c;
  white-space: nowrap;
}
nav #overflow li a:hover {
  background: #00e;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Lorem 1</a></li>
    <li><a href="#d">Lorem ipsum 2</a></li>
    <li><a href="#">Lorem 7</a></li>
          <li class="has-children"><a href="#"><i class="sth-nav-icon fa fa-table"></i>MEGA POSTS<small class="sth-nav-badge" style="background: blue">beta</small></a>
          <ul class="sub-menu">
            <div class="mega-posts">
              <h1>Mega Posts</h1>
            </div>
            <li><a href="#">Schiller</a></li>
            <li><a href="#">Gogol</a></li>
            
            <li><a href="#">Dostoievski</a></li>
            <li><a href="#">Immanuel Kant</a></li>
          </ul>
        </li>
    <li><a href="#">Lorem 10</a></li>
    <li class="more">
      <span>[MORE]</span>
      <ul id="overflow"></ul>
    </li>
  </ul>
</nav>