javascript - OnClick 元素仅移除一次

Question

我不明白 .remove() $postNav.remove(); 的行为在下面的代码片段中，如果您第一次点击“我是标签”，.remove()确实按预期删除了 <li>和 <ol>分别，但第二次单击它时只有 <li>被删除而不是 <ol> .而且我不明白为什么这里的行为不同，html 是否保持不变......

(function($) {
	$doc = $(document);
  
  var $container        = $('#main');
  var $pagePosts    = $container.find('div.post_list_wrapper ul');
	var $containerNav = $('section.section_things'); 
	var $postNav	  = $('ol.pagenation');
	var $catName  	  = "";
	var $name  	  = "";
	var $page	  = "1";
	var $clickTag	  = "";


	$doc.ready( function() {   
  
		 
		 $("a[rel='tag']").addClass("ajax_tag");

	function get_posts(){
					  
						  $pagePosts.empty();
						  $postNav.remove();
			        $pagePosts.html("<li>Click Im a tag and scroll down you will see the ol stacking " + $page + "</li><div class='tag'><a rel='tag' href='/things/tag/xxxx/'>I'm a tag</a></div>");
						  $containerNav.append("<ol class='pagenation'><a href='#' rel='tag'>" + $page + "Im the new ol</a></ol>");
              $page++;
						  
		 				  $("a[rel='tag']").addClass("ajax_tag");
						 		
			} //Get posts
		$container.on('click', "a[rel='tag'], .pagination a", function(event) {
					$this = $(this);
					event.preventDefault();
      
			if ($this.hasClass('ajax_tag')) {
							$clickTag = $this.text();
			} else {
							$page = parseInt($this.attr('href').replace(/\D/g,''));
			}
			get_posts();

			}); //onClick
   }); //Anonymous function
})(jQuery); //main function

@charset "UTF-8";
* {
	box-sizing: border-box;
}
body, html {
  text-align: center;
}

li {
	list-style: none;
}

/* THINGS ========================== */

.top .things .post_profile .category_label {
	padding: 9px 20px 5px;
	margin-right: 18px;
	background-color: #AE965C;
}


/* Pagenation ========================= */
.pagenation {
  text-align: center;
}
.pagenation li {
  display: inline-block;
  margin-right: 30px;
}

.pagenation li.prev a,
.pagenation li.next a {
  position: relative;
}
.pagenation li.prev a:before,
.pagenation li.next a:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -12px;
  border-top: 1px solid #666666;
  border-right: 1px solid #666666;
}
.pagenation li.prev a:before {
  right: 0px;
  margin-right: 20px;
  transform: rotate(-135deg);
}
.pagenation li.next a:before {
  left: 0px;
  margin-left: 20px;
  transform: rotate(45deg);
}
.pagenation li a:hover:before {
  border-top: 1px solid #AAAAAA;
  border-right: 1px solid #AAAAAA;
}

.pagenation li.prev a:before {
  margin-right: 10px;
}
.pagenation li.next a:before {
  margin-left: 10px;
}
}

#main > section.section_things {
	text-align: left;
}
.section_title {
	text-align: center;
}
.category_btn {
	margin-bottom: 40px;
}
.category_btn li {
	display: inline-block;
	margin-right: 30px;
}
.category_btn li:last-child {
	margin-right: 0;
}
.category_btn li a {
	text-align: center;
	display: block;
	min-width: 180px;
	padding: 6px;
	border: 2px solid #AE965C;
}

/* ----------------------------------------------
Post list , unit
---------------------------------------------- */

.post_list_wrapper ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.post_list_wrapper li {
	//width: 340px;
  margin-bottom: 40px;
  }
.post_list_wrapper li .eyecatch {
	position: relative;
}
.post_list_wrapper li .eyecatch .category_label {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 10;
}
.post_list_wrapper li .eyecatch .category_label a {
  display: block;
  text-align: center;
}
.post_list_wrapper li .post_body {
  position: relative;
  padding: 20px;
  min-height: 212px;
}

.post_list_wrapper li .post_body .post_title {
  margin-bottom: 20px;
}
.post_list_wrapper li .post_body .tag {
  position: absolute;
  bottom: 20px;
  right: 20px;
  line-height: 1;
}
@media screen and (max-width:768px) {
.category_btn {
  text-align: center;
  margin: 0 15px 15px;
}
.category_btn li {
  display: block;
  margin-right: 0;
}
.category_btn li a {
  border: none;
}

.post_list_wrapper li {
  margin: 0 auto 40px;
}
.post_list_wrapper li .post_body {
  min-height: inherit;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="mainwrapper">
<main role="main" id="main">
    <section class="section_things">
      <h1 class="section_title">Things</h1>
      <ul class="category_btn futura">
        <li class="is_active"><a href="#">ALL</a></li>
      </ul>
<div class="post_list_wrapper">
        <ul>
          <li>
            <div class="eyecatch">
              <a href="/things/things-post.html"><img src="http://placehold.it/340x30"></a>

              <span class="category_label"><a href="/category/xxxxx/">SPECIAL</a></span>
            </div>
            <div class="post_body">
              <a href="/things/things-post.html">
                   
                <div class="date">
                  <time datetime="2016-10-26">2016.10.26</time>
                </div>
                <h2 class="post_title">I'm a title</h2>
              </a>
              <div class="tag"><a rel='tag' href="/things/tag/xxxx/">I'm a tag</a></div>
            </div>
          </li>
        </ul>
      </div>
    <ol class="pagenation">
        <li class="prev"><a href="#"></a></li>
        <li class="is_active"><a href="/things/1/">1</a></li>
        <li><a href="/things/2/">2</a></li>
        <li class="next"><a href="#"></a></li>
      </ol>
 </section>

Answer 1

您看到 ol 堆叠的原因是，当您声明 $postNav = $('ol.pagenation') 时，您正在遍历 DOM，并将所有找到的元素存储在变量 $postNav 中。

这意味着以后，任何新添加的 ol.pagenation 都不是声明变量时找到的元素的一部分。您可以通过以下任一方法解决此问题:

1. 在 get_posts 中调用 $('ol.pagenation').remove()
2. 每次向 DOM 添加新的 ol.pagenation 时更新 $postNav 变量，例如 $postNav = $('ol.pagenation') ; 这样下次 $postNav 就有最新找到的元素。

选项 2 的好处是，如果您需要在任何其他函数中访问 $postNav，它们将可以访问最新的 DOM 元素。但是，如果您不需要在其他地方访问这些元素，选项 1 可能就足够了。

JSFIDDLE OPTION 1

JSFIDDLE OPTION 2