Remove table tr by id+jquery

Hi to all,

I have checkboxes with different value for example


<input type='checkbox' value='1' name='chk1' id='chk1' />
<input type='checkbox' value='2' name='chk2' id='chk2' />
<input type='checkbox' value='3' name='chk3' id='chk3' />
<input type='checkbox' value='4' name='chk4' id='chk4' />
<input type='checkbox' value='5' name='chk5' id='chk5' />

I have a table with one tr.when i click on checkbox a new tr is created within table with tr id same as checkbox value as shown below.


<table id="paymenttotal" width="100%" border="0" style="border: 1px solid gray;">
<tbody>
<tr id="0">
<td width="600"> </td>
<td width="78">Free $0</td>
<td width="120">Gold $100</td>
<td width="140">Platinum $195</td>
<td width="150">State $400</td>
</tr>
<tr id="3">
<td style="border: 1px solid gray;">Insurance</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
</tr>
<tr id="5">
<td style="border: 1px solid gray;">Painting</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
</tr>
<tr id="4">
<td style="border: 1px solid gray;">Basement Remodeling</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
<td style="border: 1px solid gray;">
</td>
</tr>
<tr>
</tr>
</tbody>
</table>

tr addition is fine.Now i want to remove the tr when i uncheck that checkbox.

as shown above currently i have checked checkbox 3,5,4

Now if i uncheck checkbox 5 the table tr with id 5 should be removed.

how i can do this

i have used $(‘tr:eq(5)’).remove(); but without success because maximum i can checked three checkbox it may be checkbox 6,9,10 etc

how i can do this

regards

try:


var clickedvalue = 5;
$('#' + clickedvalue).remove();

thanks for reply its work fine.

i have one more issue .In the above table i have created radio button by jquery but click event not fire if radio button created by jquery.

when i click on checkbox i will create tr with 5 td in first td is the category name and in other 4 td’s will be the radio buttons group as below


<table id="paymenttotal" width="100%" border="0" style="border: 1px solid gray;">
<tbody>
<tr id="0">
<td width="600"> </td>
<td width="78">Free $0</td>
<td width="120">Gold $100</td>
<td width="140">Platinum $195</td>
<td width="150">State $400</td>
</tr>
<tr id="3">
<td style="border: 1px solid gray;">Insurance</td>
<td style="border: 1px solid gray;">
<input type="radio" name="cat_3" value="0" />
</td>
<td style="border: 1px solid gray;">
<input type="radio" name="cat_3" value="100" />
</td>
<td style="border: 1px solid gray;">
<input type="radio" name="cat_3" value="195" />
</td>
<td style="border: 1px solid gray;">
<input type="radio" name="cat_3" value="400" />
</td>
</tr>

</tbody>
</table>


but when i create by jquery the tr with radio button click event not work

I have use this code


 $("input[@type='radio']").click(function(){
   	alert(555);
   });

radio button which are not create with jquery on that this code work but not on jquery created radio button

regards.

Try something like this then:


$('input:radio').click(function(){
			alert($(this).val());
		});

That wouldn’t work…

var clickedvalue = 5;
$('#chk' + clickedvalue).remove();

Why doesn’t this work? I tried it myself the following example and it removes the tr:


$(document).ready(function(){
	var clickvalue = 6;
	$('#rmtr').click(function(){
		$('#' + clickvalue).remove();
		clickvalue--;
	});
});


<table cellspacing="1" cellpadding="2" width="200">
	<tbody>
		<tr id="1"><td>One</td></tr>
		<tr id="2"><td>Two</td></tr>
		<tr id="3"><td>Three</td></tr>
		<tr id="4"><td>Four</td></tr>
		<tr id="5"><td>Five</td></tr>
		<tr id="6"><td>Six</td></tr>
	</tbody>
</table>
<a href="#" id="rmtr"> x </a>

Do you mean something else there is wrong with my way?

@rajug

Oh okay, that’s how your setting it up. Ya, that works fine…

Setting up?? Is there really anything wrong in the setting?

Nothing is wrong with your code man :lol:… Here is an example I set up which is similar to yours…


$(function() {
	var i = $('li').size();
	
	$('#remove').click(function() {
		$('li:last').remove();
		i--;
	});
});

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

<p><a id="remove" href="#">Remove</a></p>

id shouldn’t start with a number

crmalibu is correct, I over looked the HTML part of your code rajug. An id shouldn’t start with a number, which you probably already know :slight_smile:

Ahh… you are correct i think. That’s why I had requested you (cooper.semantics) to point out the wrong way if anything.

But is it strange that it is working fine in most of the browsers when I tested.

  • FF3.0.11
  • IE 7
  • Opera
  • Chrome
  • Safari 4 beta (windows)

Actually I had just tried to solve OP’s problem with his own HTML not created myself. And i had never done this before in that way having the ids as only numbers. Is it supposed to have given some error or it is just a standard that the ids should not start with numbers?

http://www.maxdesign.com.au/2008/04/10/naming-ids-with-numbers/