jQuery selector depending on children

Question

Hi guys, I have an HTML form consisting of some text-inputs. I'm using jqTransform to prettify them. Now I want to add two buttons that will add and remove text-input dynamically.

Adding is easy: $('#container').append(''); $('input[name=foo]:last-child').jqTransInputText();

But removing is tricky: $('WHAT-TO-SELECT').remove();

I can't do "input[name=foo]:last-child" since it's already wrapped (some divs) by jqTransform. To put this question in another way: How do I select based on "who has child of type input with 'foo' as its name"?

Answer 1

You might try selecting the input with 'foo' as its name and grabbing it's parent.

$('input[name=foo]').closest('.parentSelector').remove();

Answer 2

Not completely sure what you mean. but it looks like you could be doing more work on it by just chaining.. ie..

$('input[name=foo]:last-child').jqTransInputText().remove();

I'm not sure if that's exactly what you are looking for.. if not, look into the find function in jQuery.

Answer 3

$('input[name=foo]').parent().remove();

Additionally the parent method can be supplied with an normal selector as well to only remove a specific parent.

Answer 4

I closed the issue not by giving solution to the problem, instead I enclose the input tag with div thus eliminating the problem. So to remove the input tag, I simply remove the div. Thanks anyway guys!