javascript - 使用纯 JavaScript 选择父元素并自动滚动到最后一个元素

Question

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

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

its not deleting the entire post, just the span.

这是有道理的。

• '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;
}

如果您愿意使用 jQuery，定位 .comment-container 会更容易。

首先，向您的 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 
    }
  }