如何从jQuery中的父项中删除一个HTML标记

Question

<td>
    <input type='checkbox' value='-1' name='xxx' checked>XXX
    <input type='hidden' value='-1' name='xxx'>
</td>
<td>
    <input type='checkbox' value='-1' name='xyy' checked>Xyy
    <input type='hidden' value='-1' name='xyy'>
</td>
<td>
    <input type='checkbox' value='-1' name='yyy' checked>yyy
    <input type='hidden' value='-1' name='yyy'>
</td>

In the above code I set a hidden value with same name as on submition of form neither 0 nor 1 is being submitted. Now I got a problem that when I click the checkbox I want to remove the input:hidden node and remain will same. But using $("input:hidden").remove() its removing the total hidden values present in the document.

Answer 1

$("input[name=xxx]:hidden").remove();

Answer 2

You can try this if you have that html structure. It simply removes next hidden input of checked checkbox.

$("input:checkbox").click(function() {
  $(this).next("input:hidden").remove();
});

If you want to delete them only when checkbox is checked you can add this condition

if ($(this).is (':checked'))

Answer 3

try this:

$("input:checkbox").click(function() { 
$(this).next("input:hidden").remove(); 
}); 

Answer 4

Your solution is needlessly complicated if you ask me. An <input type='checkbox' value='-1' name='xxx' checked/> returns the value to the backend if it is checked else it returns nothing. So essentially it does the same thing you are trying to accomplish by putting those extra hidden fields and removing them - a lot more efficiently, I might add.

Please do review the code you have written. You may refer here for knowing how checkboxes are handled.

Answer 5

<td>
    <input type='checkbox' value='-1' name='xyy' class='xyz' checked>Xyy
    <input type='hidden' value='-1' name='xyy'  class='xyz'>
</td>.

$("input.xyy:hidden").remove();

Added a class and managed the requirenment.