Forum PHP.pl

Mam skrypt, który ma dynamicznie dodawać kolejne divy, a w nich pola tekstowe

[PHP] pobierz, plaintext 
i=0;
function wstaw_sciane() {
    i++;
    var tekst = document.createTextNode(i+'. ');
 
    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', 's[]');
    input.setAttribute('class', 'c_sciany');
    input.setAttribute('id', 'id'+i);
 
    var input2 = document.createElement('input');
    input2.setAttribute('type', 'button');
    input2.setAttribute('value', 'usun');
    input2.setAttribute('onclick', 'usun_sciane();');
 
    var div   = document.createElement('div');
 
    div.appendChild(tekst);
    div.appendChild(input);
    div.appendChild(input2);
 
    document.getElementById('sciany').insertBefore(div, document.getElementById('wstaw_pole'));
}
 
[PHP] pobierz, plaintext 

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.

[HTML] pobierz, plaintext 
<form method="post" onSubmit="return check_form(this);">
 
<div class="wall_box">Œ
	<div id="sciany">
		<input type="button" value="wstaw" onclick="wstaw_sciane('');" id="wstaw_pole" />
	</div>
</div>
 
<div class="zatwierdz">
	<input type='submit' value='oblicz' class="input2" />
	<input type='reset' value='wyczyść' class="input2" />
</div>
 
</form>
[HTML] pobierz, plaintext 

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ą.

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.

http://www.dustindiaz.com/add-remove-elements-reprise/ - ja znalazlem taki link, moze bedzie pomocny.

Natomiast w jQuery wygladaloby to po prostu tak:

[PHP] pobierz, plaintext 
$('a.usun').live('click', function(){
   $('div.className').remove();
});
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
 
<a href="javascripti:void(0)" class="usun">link do usuniecia diva</a>
 
<div class="className">
div do usuniecia
</div>
 
[HTML] pobierz, plaintext 

Zapoznaj sie tez z poleceniem empty()

Ten post edytował Kaloryfer 6.11.2011, 13:06:57

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:

[PHP] pobierz, plaintext 
<script LANGUAGE="JavaScript">
 
i=0;
function wstaw_sciane() {
    i++;
    var tekst = document.createTextNode(i+'. ');
 
    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('id', 'i_ds[]');
 
    var input2 = document.createElement('input');
    input2.setAttribute('type', 'button');
    input2.setAttribute('value', 'usun');
    input2.setAttribute('id', 'b_us['+i+']');
    input2.setAttribute('onclick', 'usun_sciane('+i+');');
 
    var div   = document.createElement('div');
    div.setAttribute('class', 'wall');
    div.appendChild(tekst);
    div.appendChild(input);
    div.appendChild(input2);
 
    document.getElementById('sciany').insertBefore(div, document.getElementById('wstaw_pole'));
     }
 
 
function usun_sciane(x) {
	if(confirm("Czy napewno usunąć?") )
		{
		var cel = document.getElementById('b_us['+x+']').parentNode;
		cel.parentNode.removeChild(cel);
		}
	else
		{
		alert('Nie to nie');
		}
	}
 
</SCRIPT>
[PHP] pobierz, plaintext 

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

[PHP] pobierz, plaintext 
function usun_sciane(x) {
	if(confirm("Czy napewno usunąć?") )
		{
		var cel = document.getElementById('b_us['+x+']').parentNode;
		var cel_2 = document.getElementById('sciany').getElementsByTagName('div');
		cel.parentNode.removeChild(cel);
		for(i=0; i<cel_2.length; ++i) cel_2[i].firstChild.textContent = (i+1)+'.';
		}
 
	}
[PHP] pobierz, plaintext 

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?

Ten post edytował di@blo 6.11.2011, 15:34:18