プレーンJavaScriptで親要素を選択し、最後の要素に自動スクロール

Question

私は親要素を削除するために削除画像を作成しましたが、何らかの理由でその投稿全体、スパンだけを削除しませんでした。 2番目の質問は、私は最新のコメントを投稿したブラウザを自動スクロールしたいので、ユーザーはオーバーフローの実装を使って手動でスクロールせずに最新のコメントを見ることができます。以下はコードです。メイン画像と削除ボタンは私のコンピュータの画像です。

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

ラッパーを削除するためには、あなたはjQのを使用して開いている場合は

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

：コメントの要素（そう、画像の親の親）.comment-containerで、あなたはこの機能を必要とします.comment-containerをターゲットにする方が簡単です。

まず、あなたのimg要素にクラスを追加します。

その後、最後のコメントにスクロールするためには、イベントハンドラ（非インラインJavaScriptを好む）

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

を添付し、

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