jq插入移除节点问题

Question

    var temp=true;
 $(".chat-btn").click(function(){
         if(temp){
              $(this).parent().next().after($("#comment-reply-box"));
               console.log($(this).parent().next())
             }else{
                 $("#comment-reply-box").remove()
                 }    
                  temp=!temp  
     })

问题是这样的当我点击的时候插入一个div;再次点击的时候就移除；当我第三次点击的时候发现他就不插入div了；而我 console.log($(this).parent().next())都是同一个节点；请问这是怎么回事

Answer 1

首先是不插入的问题：当第二次点击 $("#comment-reply-box").remove() 之后，第三次点击 $("#comment-reply-box") 就取不到任何东西啦因为已经从DOM树移除啦。可以一开始就保存下来这个变量：

var temp=true;
var $box = $("#comment-reply-box");
$(".chat-btn").click(function(){
        if(temp){
            $(this).parent().next().after($box);
        }else{
            $box.remove()
        }    
        temp=!temp  
     })
})

然后为什么 $(this).parent().next() 都是同一个节点这个，没看到你这边的html我暂时不知道是为啥。

Answer 2

//因为你第二次操作将dom元素删除了，第三次操作$('#comment-reply-box')已经是undefined
//将id=comment-reply-box的dom写成字符串
//再将js改造哈
var temp=true;
var box = '<div id="comment-reply-box"></div>';
var $box='';
$(".chat-btn").click(function(){
        if(temp){
            $(this).parent().next().after(box);
            $box=$('#comment-reply-box');
        }else{
            $box.remove()
        }    
        temp=!temp  
     })
})