如果其childNodes为空，则隐藏元素

Question

我的目标是追加隐藏注释回复的按钮，并且如果没有每个评论的回复，则不显示此按钮。

请不要为此代码责怪我太多，因为我是新手并且在努力学习。

下面的代码：

var replies = document.querySelectorAll(".comments_list > .comment_item > .reply_comments"); //should check if .childNodes.length === 1 
var comments = document.querySelectorAll(".comments_list > .comment_item"); 
var combodys = document.querySelectorAll(".comments_list > .comment_item > .comment_body"); 

addBtn(); 

function addBtn() { 
    for (var i = 0; i < comments.length; i++) { 
    var combody = combodys[i]; 
    var btn = document.createElement("input"); 
    btn.type = "button"; 
    btn.className = "hidereplies"; 
    btn.value = "show replies"; 
    combody.appendChild(btn); //don't show if replies.childNodes.length === 1 
    } 
} 

按钮后添加我要检查，如果注释包含答复和隐藏按钮时回复块是空的。试图检查的childNodes方法和面临的问题，我不得不“+1”当前“hidereplies”按钮值：

if (replies[6 + 1].childNodes.length === 1) { 
document.querySelectorAll(".hidereplies")[6].style.display = "none"; 
} 

所以，现在我不通过所有评论懂得周期和隐藏“如果没有回复，则隐藏“回复”按钮。

希望能帮助解决这个问题，以纯Javascript。 在此先感谢！

Answer 1

尝试

function getChildrenByClassName(el, className){ 
    var children = []; 
    for (var i = 0; i < el.childNodes.length; i++) { 
     if (el.childNodes[i].className == className) { 
      children.push(el.childNodes[i]); 
     }   
    } 
    return children; 
} 

function addBtn() { 
    var comments = document.querySelectorAll(".comments_list > .comment_item"), comment, combody; 

    for (var i = 0; i < comments.length; i++) { 
     comment = comments[i]; 
     var replies = comment.querySelectorAll('.reply_comments .comment_body'); 
     if(replies.length > 0){ 
      combody = getChildrenByClassName(comment, 'comment_body')[0]; 
      if(combody){ 
       var btn = document.createElement("input"); 
       btn.type = "button"; 
       btn.className = "hidereplies"; 
       btn.value = "show replies"; 
       combody.appendChild(btn); //don't show if replies.childNodes.length === 1 
      } 
     } 
    } 
} 
addBtn(); 

演示：Fiddle