用普通的JavaScript选择父元素，并自动滚动到最后一个元素

Question

我做了删除图片删除parentelement但由于某种原因它不删除整个帖子，只是跨度。第二个问题是，我希望浏览器自动滚动到发布的最新评论，这样用户就可以看到最新评论，而无需使用我的溢出实施进行手动滚动。下面是代码。主图片和删除按钮是我电脑中的图片。请帮助

function postcomment() 
 

 
{ 
 
    var time = new Date(); 
 
    var h = time.getHours(); 
 
    var m = time.getMinutes(); 
 
    var s = time.getSeconds(); 
 
    
 
if (h > 12){ 
 
    h = h - 12; 
 
} 
 

 

 
else if (m < 10){ 
 
    m = "0" + m; 
 
} 
 

 

 
else if (s<10){ 
 
    s = "0" + s; 
 
} 
 

 
    
 

 
    var comment = document.getElementById('comment').value 
 
    var comments = document.getElementById('wherecommentgoes'); 
 

 
    comments.innerHTML += "Post: " + comment + "<span>"+"at "+ 
 
    h+" : "+m+" : "+s+" " +"<span id ='pic' onclick='delte(this)'><img src='http://www.freeiconspng.com/uploads/remove-icon-png-23.png' width='50' height='50'></span>"+"</span>" + "<br>"; 
 

 
    document.getElementById('comment').value=""; 
 
    } 
 

 
    function delte(x){ 
 
    x.parentElement.remove(x); 
 
    }

 
    <div id="wherecommentgoes"></div> 
 
    <textarea rows="4" cols="50" id="comment" placeholder="Enter Your Comment Here"></textarea <span id=""></span>> 
 
    <button id="submitbutton" onclick="postcomment()">Post</button> 
 
</body> 
 
</html>

Answer 1

它不是删除整个帖子，只需跨度。

这很有道理。

• 'this'是img元素。
• 这个父是span元素

你应该每个注释周围添加一个容器元素，一类（而不是ID）：

comments.innerHTML += "<div class='comment-container'> Post: " + comment + "<span>"+"at "+ 
    h+" : "+m+" : "+s+" " +"<img id ='pic' onclick='delte(this)' src='./images/delete.jpg'>"+"</span>" + "</div>"; 

为了删除包装注释的元素（因此，图像的父母的父母），这是.comment-container，你需要这个功能：

function findAncestor (el, cls) { 
    while ((el = el.parentElement) && !el.classList.contains(cls)); 
    return el; 
} 

如果你打开使用JQ uery，针对.comment容器会更容易。

首先，一类添加到您的img元素：

然后附加一个事件处理程序（喜欢非内嵌JavaScript）

$('body').on('click', '.js-delete', function() { 
    $(this).closest('.comment-container').remove(); 
)}; 

为了滚动到最后评论，修改你的delte功能，如：

function delte(x){ 
    var parentContainer = $(this).closest('.comment-container'); 
    var targetToScroll = parentContainer.last(); // we're caching the last comment 
    x.parentElement.remove(x); 
    if(targetToScroll.length) { // if the element exists... 
     event.preventDefault(); 
     realoffSet = targetToScroll.offset().top; // calculate the distance from the top 
     $("html, body").animate({scrollTop: realoffSet}, 500); // scroll to that point 
    } 
    }