Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dynamiczne usuwanie diva (JS)
Forum PHP.pl > Forum > Po stronie przeglądarki
di@blo
Mam skrypt, który ma dynamicznie dodawać kolejne divy, a w nich pola tekstowe
  1. i=0;
  2. function wstaw_sciane() {
  3. i++;
  4. var tekst = document.createTextNode(i+'. ');
  5.  
  6. var input = document.createElement('input');
  7. input.setAttribute('type', 'text');
  8. input.setAttribute('name', 's[]');
  9. input.setAttribute('class', 'c_sciany');
  10. input.setAttribute('id', 'id'+i);
  11.  
  12. var input2 = document.createElement('input');
  13. input2.setAttribute('type', 'button');
  14. input2.setAttribute('value', 'usun');
  15. input2.setAttribute('onclick', 'usun_sciane();');
  16.  
  17. var div = document.createElement('div');
  18.  
  19. div.appendChild(tekst);
  20. div.appendChild(input);
  21. div.appendChild(input2);
  22.  
  23. document.getElementById('sciany').insertBefore(div, document.getElementById('wstaw_pole'));
  24. }
  25.  


i wszystko działa jak należy. Problem w tym, że nie potrafię stworzyć działającej funkcji na usuwanie stworzonych pól. Kombinowałem na różne sposoby, ale coś nie działa.

  1. <form method="post" onSubmit="return check_form(this);">
  2.  
  3. <div class="wall_box">Œ
  4. <div id="sciany">
  5. <input type="button" value="wstaw" onclick="wstaw_sciane('');" id="wstaw_pole" />
  6. </div>
  7. </div>
  8.  
  9. <div class="zatwierdz">
  10. <input type='submit' value='oblicz' class="input2" />
  11. <input type='reset' value='wyczyść' class="input2" />
  12. </div>
  13.  
  14. </form>


Próbowałem z usuwaniem konkretnego pola tekstowego, ale funkcja nie przyjmowała prawidłowego parametru funkcji. W funkcji usuwającej podawałem numer id pola do usuniecia, ale funkcja zwracała zupełnie inny numer.

Tak czy inaczej optymalnym rozwiązaniem byłoby usuwanie diva wraz z zawartością, w którym znajduje się button 'usun'.

Problem wydaje się prosty, ale ja nie mam za dużego doświadczenia w JS, a skakanie po węzłach i funkcja .removeChild jest dla mnie nowością.
lukaskolista
http://jquery.com/ - jedna z najlepszych bibliotek JS, wystarczy dolaczyc plik tej biblioteki aby z niej korzystac (dolaczyc przed Twoimi skryptami). W pierwszej kolejnosci zainteresuj sie selektorami, bardzo ulatwiaja poruszanie sie po drzewie DOM.
Kostek.88
http://www.dustindiaz.com/add-remove-elements-reprise/ - ja znalazlem taki link, moze bedzie pomocny.

Natomiast w jQuery wygladaloby to po prostu tak:
  1. $('a.usun').live('click', function(){
  2. $('div.className').remove();
  3. });


  1.  
  2. <a href="javascripti:void(0)" class="usun">link do usuniecia diva</a>
  3.  
  4. <div class="className">
  5. div do usuniecia
  6. </div>
  7.  


Zapoznaj sie tez z poleceniem empty()
di@blo
Dzięki, ale nie chcę (narazie) stosować JQ. Po pierwsze po co do 2 funkcji podczepiać JQ? Po drugie chcę nauczyć się póki co czystego JS.

A problem rozwiązałem tak:

  1. <script LANGUAGE="JavaScript">
  2.  
  3. i=0;
  4. function wstaw_sciane() {
  5. i++;
  6. var tekst = document.createTextNode(i+'. ');
  7.  
  8. var input = document.createElement('input');
  9. input.setAttribute('type', 'text');
  10. input.setAttribute('id', 'i_ds[]');
  11.  
  12. var input2 = document.createElement('input');
  13. input2.setAttribute('type', 'button');
  14. input2.setAttribute('value', 'usun');
  15. input2.setAttribute('id', 'b_us['+i+']');
  16. input2.setAttribute('onclick', 'usun_sciane('+i+');');
  17.  
  18. var div = document.createElement('div');
  19. div.setAttribute('class', 'wall');
  20. div.appendChild(tekst);
  21. div.appendChild(input);
  22. div.appendChild(input2);
  23.  
  24. document.getElementById('sciany').insertBefore(div, document.getElementById('wstaw_pole'));
  25. }
  26.  
  27.  
  28. function usun_sciane(x) {
  29. if(confirm("Czy napewno usunąć?") )
  30. {
  31. var cel = document.getElementById('b_us['+x+']').parentNode;
  32. cel.parentNode.removeChild(cel);
  33. }
  34. else
  35. {
  36. alert('Nie to nie');
  37. }
  38. }
  39.  
  40. </SCRIPT>



Teraz próbuje na nowo nadać numery wszystkim elementom, ale nie bardzo wiem jak dobrać się do każdego TextNode we wszystkich pozostałych div'ach.

EDIT
  1. function usun_sciane(x) {
  2. if(confirm("Czy napewno usunąć?") )
  3. {
  4. var cel = document.getElementById('b_us['+x+']').parentNode;
  5. var cel_2 = document.getElementById('sciany').getElementsByTagName('div');
  6. cel.parentNode.removeChild(cel);
  7. for(i=0; i<cel_2.length; ++i) cel_2[i].firstChild.textContent = (i+1)+'.';
  8. }
  9.  
  10. }



Wszystko znika jak należy, ale pytanie co się dzieje z wszystkimi obiektami, które znajdowały się w usuniętym divie, bo gdzieś czytałem, że trzeba wszystkie elementy usunąć przed usunięciem elementu nadrzędnego? Inputy, które miały id które miały id z tablicy nadal zajmują miejsce w tej tablicy?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.