<tr> pokazuje się u ukrywa tylko raz po kliknięciu

Witam próbuję zrobić funkcję która po kliknięciu w w tabeli doda niżej jeszcze jedno z pobranymi danymi

 <script type="text/javascript">
		function pobierzinfo(id) {
			element = $(this);
			var xx = $('<tr><td>test</td></tr>');
			xx.insertAfter(element);
			element.on('click', function(){
				$(this).remove();
			});
		}
		</script>

tak wygląda owa funkcja

<tr onclick=\"pobierzinfo.call(this, ".$row['id'].")\"></tr><td>dddd</td>

a tak tr w który trzeba kliknąć
Niby wszystko jest ok lecz ta funkcja działa tylko raz czyli jeżeli klikniemy w tr i znów klikniemy żeby usunąć dodane tr to po następnym kliknięciu ( w ten sam tr ) funkcja go dodaje i od razu usuwa

Wie ktoś może jak to naprawić lub ma jakiś inny sposób na dodanie bo kliknięciu w i usunięciu po kliknięciu w ten sam ?

<tr onclick=\"pobierzinfo.call(this, ".$row['id'].")\"></tr><td>dddd</td>

Nie wiem, czy to jest przyczyną twojego błędu, ale ten tr na pewno nie jest prawidłowy. Zauważ, że td jest poza tr.

Edit:
Ok, generalnie twój problem polega na tym, że podpinasz nowe zdarzenie onclick, ale nie odpinasz poprzedniego. Musisz w tym pierwszym onclick (dodającym tr) usunąć event onclick tego elementu, i dopiero wtedy dodać nowy onclick (usuwający tr).

ten kod to jest tylko wycięty kawałek zapomniałem dopisać </tr>

Rozumiem co masz na myśli tylko w sumie nigdy tego nie robiłem a Javasctipt też słabo znam jest jakaś funkcja która mi to odepnie ?

$("#saveBtn").off("click");

http://stackoverflow.com/questions/825112/how-to-remove-all-click-event-handlers-in-jquery

		<script type="text/javascript">
			function pobierzinfo(id) {
				var canal = '<?php echo $canal; ?>';
				$.post("xxx.php", { 'id':id, 'canal':canal }, function(data) {
					var xxx = data;
				});
				element = $(this);
				xxx.insertAfter(element);
				element.on('click', function(){
					$(element).off("click");
					$(this).remove();
				});
			}
		</script>

funkcja wygląda teraz tak tylko że consola wywala błąd Uncaught ReferenceError: xxx is not defined

xxx.insertAfter(element);

Spróbuj przenieść powyższe do callback'a metody post().

		function pobierzinfo(id) {
			element = $(this);
			var canal = '<?php echo $canal; ?>';
			$.post("xxx.php", { 'id':id, 'canal':canal }, function(data) {
				dupa = $(data);
				dupa.insertAfter(element);
			});
			element.on('click', function(){
				$(element).off("click");
				dupa.remove();
			});
		}

niby działa tylko że po ponownym kliknięciu usuwa to co dodało ale od razu dodaje na nowo

ref