OnClick element removed only one time

Question

I don't understand the .remove() behavior here of $postNav.remove(); In the snippet below if the first time you click on "I'm a tag" the .remove() does work as expected deleting the

and

is deleted and not the

(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("Click Im a tag and scroll down you will see the ol stacking " + $page + "
I'm a tag");
						  $containerNav.append("" + $page + "Im the new 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;
}
}





    
      Things
      
        ALL
      

        
          
            
              

              SPECIAL
            
            
              
                   
                
                  2016.10.26
                
                I'm a title
              
              I'm a tag
            
          
        
      
    
        
        1
        2

haxxxton · Accepted Answer

The reason you're seeing the ol's stacking is that when you declare $postNav = $('ol.pagenation') you are traversing the DOM, and storing any found elements in the variable $postNav.

This means that later, any newly added ol.pagenation arent part of the elements that were found when you declared the variable. You can fix this by either:

calling $('ol.pagenation').remove() inside get_posts
updating the $postNav variable each time you add new ol.pagenation's to the DOM like $postNav = $('ol.pagenation'); so that next time $postNav has the latest found elements.

The benefit of option 2 is that if you need to access $postNav in any other functions, they will have access to the latest DOM elements. If, however, you dont need access to these elements elsewhere, option 1 may suffice.

JSFIDDLE OPTION 1

JSFIDDLE OPTION 2

OnClick element removed only one time

Answers (1)

Related Questions