Selecting parent element with plain JavaScript and auto-scrolling to the last element

Question

i made the delete pic to delete the parentelement but for some reason its not deleting the entire post, just the span. second question is , i want the browser to auto-scroll to the latest comment posted, so user can see the latest comment without manually scroll using my overflow implementation. below is the code. main picture and delete button are pictures in my computer. please help

 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.

That makes sense.

• 'this' is the img element.
• the parent of this is the span element

You should add a container element, with a class (and not an id) around each comment:

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

In order to delete the wrapper element of the comment (so, the parent of the parent of the image) which is the .comment-container , you need this function:

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

If you're open to using jQuery, targeting the .comment-container would be easier.

First, add a class to your img element:

then attach an event handler (prefer non-inline JavaScript)

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

In order to scroll to the last comment, modify your delte function as such:

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