2

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>
George Katsanos
  • 13,524
  • 16
  • 62
  • 98
jsPlayer
  • 1,195
  • 7
  • 32
  • 56
  • I answered and edited/cleaned your question, let me know if you need more info. In general try to clean up unnecessary bits of code when posting a snippet : don't add images (not necessary for us to understand the problem), don't add links to scripts of CSS files that are in your local drive (put the actual code in the editors) – George Katsanos Oct 20 '16 at 14:05
  • for your scrolling problem see http://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript – Woncker Oct 20 '16 at 14:08
  • thanks . i will do that from now on.:) – jsPlayer Oct 20 '16 at 14:11
  • first problem: your script is removeing just the span because you´re telling it to do so, as x=your span; – Pedro Emilio Borrego Rached Oct 20 '16 at 14:29

1 Answers1

0

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 
    }
  }
George Katsanos
  • 13,524
  • 16
  • 62
  • 98