[JavaScript]usuwanie wierszy z tabeli po id Opcje

[Randallmaster]

Witam,

Zaczynam dopiero zabawę z jquery i mam mały problem, nie mogę usunąć danego wiersza po id. Moje kody:

Budowa tabeli:

[HTML] pobierz, plaintext 
		<tbody id="elements">
			<tr class="element">
				<td name="lp[1]" align="center">1</td>
				<td><input name="name[1]" type="text" value="" /></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td align="center">
					<button class="button" id="remove" style="margin: 5px 0 5px 0;"/>
						<img src="../ikony/usun_lp.png" />
					</button>
				</td>
			</tr>
		</tbody>]
[HTML] pobierz, plaintext 

Budowa Jquery:

[HTML] pobierz, plaintext 
$(document).ready(function() {
 
var lp = 1;
$('#remove').click(function(){
	$('#elements .element:td[name="lp['+lp+']"]').remove($('#elements'));
});
});
[HTML] pobierz, plaintext 

Ten post edytował Randallmaster 30.12.2012, 11:50:56

[mortus]

Piszesz, że chcesz usunąć wiersz, ale w skrypcie używasz elementu tbody (ciało tabeli, id="elements").

[JAVASCRIPT] pobierz, plaintext 
$('#elements .element td[name="lp['+lp+']"]').parent().remove();
[JAVASCRIPT] pobierz, plaintext 

Zwróć uwagę, że wyrzuciłem dwukropek z pierwszego selektora i selektor z metody .remove(), bo ten selektor - nie dość, że źle zapisany, to jeszcze sprawia, że .remove() przeszukuje potomków wcześniej wyselekcjonowanych elementów, które mają identyfikator "elements", tymczasem u Ciebie jest to element nadrzędny.

[Randallmaster]

Zrobiłem takie coś:

[HTML] pobierz, plaintext 
$('#remove').click(function(){
	var newRow = $('.element');
	newRow.find('td[id="lp['+lp+']"]');
	newRow.remove();
});
[HTML] pobierz, plaintext 

Usuwa ale wszystko nie uwzględnia danego wiersza

[mortus]

No cóż, to normalne, bo newRow to wszystkie elementy klasy element. Jeśli miałoby to być w takiej formie, to tak:

[JAVASCRIPT] pobierz, plaintext 
$('#remove').click(function(){
	var newRow = $('.element');
	var rowToRemove = newRow.find('td[id="lp['+lp+']"]').parent();
	rowToRemove.remove();
});
[JAVASCRIPT] pobierz, plaintext 

PS: Trzeba się zastanowić co dany selektor dokładnie określa. Radzę też korzystać z narzędzi takich jak Firebug dla Firefox-a, bo naprawdę ułatwiają życie.

Ten post edytował mortus 30.12.2012, 12:51:55

[Randallmaster]

No właśnie po to dodaje to:

td[id="lp['+lp+']"]

aby określić dany wiersz i po tym usunąć <tr> o classie .element

kurcze siedzę już z 2 godziny i nic

ewentualnie zrobić każdy inny przycisk?

[mortus]

Przecież Ci napisałem dwa rozwiązania:

[JAVASCRIPT] pobierz, plaintext 
// zauważ, że element
$('.element td[name="lp['+lp+']"]') // to ciągle komórka tabeli, czyli HTML-owy <td></td>
// natomiast elementem nadrzędnym (rodzicem) dla tego elementu jest odpowiedni wiersz, HTML-owy <tr></tr>, stąd
$('.element td[name="lp['+lp+']"]').parent().remove(); // zadziała tak, jak trzeba
[JAVASCRIPT] pobierz, plaintext 

Zwróć uwagę na to, że używam metody .parent() do wyselekcjonowania odpowiedniego elementu <tr></tr> o klasie element.

[Randallmaster]

zrobiłem tak jak napisałeś za pierwszym razem i nie działa ;(

[mortus]

Pokaż cały kod HTML i JS.

[Randallmaster]

budowa tabeli:

[HTML] pobierz, plaintext 
		<tbody id="elements">
			<tr class="element">
				<td id="lp[1]" align="center">1</td>
				<td><input name="name[1]" type="text" value="" /></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td align="center">
					<button id="remove" class="button" />
						<img src="../ikony/usun_lp.png" />
					</button>
				</td>
			</tr>
		</tbody>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
$('#remove').click(function(){
	var newRow = $('#elements');
	var rowToRemove = newRow.find('td[id="lp['+lp+']"]').parent();
	rowToRemove.remove();
});
[HTML] pobierz, plaintext 

Myślałem żeby określić id buttona i to np zrobie bedzie id="remove1" id="remove2" id="remove3" itd. ale i tak nie pobiera danego id="lp"...
gdy wpisze ręcznie
var rowToRemove = newRow.find('td[id="lp[1]"]').parent();
to usunie tylko 1 pozycje a jak wpisze 2 to juz jest blad...



Zrobiłem nawet tak aby poszczególne pozycje ręcznie usunąć, ale nawet wpisując ten kod to tak czy inaczej usuwa mi z przycisku remove1 a remove2 nie działa...

[HTML] pobierz, plaintext 
$('#remove1').click(function(){
	var newRow = $('.element');
	var rowToRemove = newRow.find('td[id="lp[1]"]').parent();
	rowToRemove.remove();
});
$('#remove2').click(function(){
	var newRow = $('.element');
	var rowToRemove = newRow.find('td[id="lp[2]"]').parent();
	rowToRemove.remove();
});
[HTML] pobierz, plaintext 

[mortus]

Przecież nie pisałeś, że chodzi Ci właśnie o to. Przykład. Choć sposobów może być tyle ilu programistów.

[webdice]

Pierwsze co źle robisz to nadawanie ID remove dla buttona który się powtarza. ID musi być unikalne. Zrób coś w rodzaju.

[HTML] pobierz, plaintext 
<button class="button remove" />
[HTML] pobierz, plaintext 

i w JS:

Kod

$( 'button.remove' ).click( function()
{
  $( this ).parents( 'tr.element' )
    .remove();
});

[Randallmaster]

webdice zrobiłem tak ale i tak nie działa ;/

$('.button').click(function(){
$(this).parents('tr.element')
.remove();
});

mortus..

Widzę że twój przykład działa, ale musiałbym przebudować dodawanie element_1, a nie można by zanzaczać tr class="element" poprzez funkcje this??

[webdice]

Wrzuć to na jsfiddle.

EDIT: http://jsfiddle.net/Vv88a/

[Randallmaster]

http://jsfiddle.net/nQXwc/1/

U mnie działa dodawanie pozycji a tu nie

[webdice]

To co Ty wymyśliłeś jest bez sensu. Zrób tak jak Ci napisałem.

[Randallmaster]

Zrobiłem tak jak mi pisałeś:

Przycisk z class="button"

[HTML] pobierz, plaintext 
<button  class="button" >
<img src="../ikony/usun_lp.png" />
</button>
[HTML] pobierz, plaintext 

Kod js

[PHP] pobierz, plaintext 
$( '.button' ).click( function()
{
  $( this ).parents( 'tr.element' )
    .remove();
});
[PHP] pobierz, plaintext 

i nie działa

Ten post edytował Randallmaster 30.12.2012, 14:41:20

[webdice]

Co jest człowieku z Tobą? Myślisz że jestem wróżką i potrafię wróżyć z kawałku kodu? Klej to na jsfiddle.

[Randallmaster]

sorry ale już długo się nad tym męczę

tam jest dodawanie i usuwanie pozycji.
u mnie działa dodawanie nie wiem czemu tutaj nie

http://jsfiddle.net/KByAv/

[webdice]

sorry ale już długo się nad tym męczę (...)

To Cię nie zwalania z myślenia.

(...) u mnie działa dodawanie nie wiem czemu tutaj nie
http://jsfiddle.net/KByAv/

Nie dołączyłeś jQuery (po lewej masz wybór biblioteki). Skoro działa to co jeszcze chcesz?

[Randallmaster]

AAAAAAAAAAA

wybrałem biblioteke:

http://jsfiddle.net/KByAv/2/

I teraz tak przycisk dodaj pusta pozycje dziala,

ale nie działa przycisk usuń