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

如果您愿意使用jQuery，那么定位.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 
    }
  }

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

1 个答案: