JavaScript - usuwanie elementu ze strony


(snajper___) #1

Siema.
Sytuacja wygląda tak: jest sobie stronka komentarzy na forum. Na jednej stronie może być widocznych max 10 komentarzy i tyle też ich jest na naszej stronce. Pod spodem jest formularz do wysłania posta typu quick_reply, czyli po wysłaniu nowy komentarz ma się dodawać do widocznej listy bez odświeżania strony. Po tym jeżeli postów na stronie jest więcej niż 10, to najstarszy ma być usuwany z widoku. Jest za to odpowiedzialny kod:

if ($("#posts > div").length > 10) {
    var strona = document.querySelector("div #posts");        
    strona.removeChild(strona.childNodes[21]);
    $('#posts > div:nth-of-type(11)').remove();
}

i wszystko ładnie pięknie, po załadowaniu strony i dodaniu komentarza najstarszy post jest usuwany, ale już po wysłaniu kolejnego komentarza - nie. Czyli działa to tylko za pierwszym razem. Dlaczego? I jak zrobić, żeby działało przy każdym komentarzu?


(Fizyda) #2

Obsługiwać każde wysłanie posta, a nie tylko pierwszego.


(krystian3w) #3

Wykrywać zdarzenie dodawania posta? addEventListener

https://www.w3schools.com/jsref/met_document_addeventlistener.asp


(Fizyda) #4

Niestety kulą w płot. AddEventListener nie zadziała dla elementów dodanych po jego zadeklarowaniu. Trzeba by było użyć inteligentniejszego event listenera z jQuerego i dodać go poprzez funckję jQuery.on(). Niestety i to nie jest dobrym rozwiązaniem. Najlepiej podpiąć się pod zdarzenie w skrypcie który odpowiada za dodanie - czyli wysłanie - nowego komentarza i obsługę odpowiedzi od serwera. Jeśli wszystko odbyło się poprawnie to on powinien wywołać odpowiedni event w którym obsłużymy taką akcję jak usunięcie najstarszego komentarza z obecnie wyświetlanych.


(snajper___) #5

eeee… Dobra, już sobie poradziłem :stuck_out_tongue: Dzięki za pomoc w każdym razie.
if ($("#posts > div").length > 10) {
var nodelist = document.querySelectorAll(“div .post”);
nodelist[nodelist.length-1].remove();
}
tylko tyle mi było potrzebne, resztę już robi skrypt forum :wink: Chociaż teraz zostaje kwestia odpowiedniej numeracji postów (czyli od ostatniego numerka) i jeszcze jedna. No ale to na później sobie zostawię.


(narandill) #6

Też nie lubię IE :wink:


(snajper___) #7

słuszne spostrzeżenie :stuck_out_tongue:
zmieniłem na:
if ($("#posts:nth-of-type(1) > div").length > 10) {
var nodelist = document.querySelectorAll(“div .post”);
var item = $(’#posts:nth-of-type(1) > div’)[nodelist.length-1];
item.parentNode.removeChild(item);
}
Dzięki za zwrócenie uwagi!