jQuery syntax to select class in related parent

Question

I have an "add" button that inserts this row everytime it is clicked. Each row has an Edit and Delete button.

//html
<tr class="insertedRow">
    <td><input type="hidden" class="name" /></td>
    <td><input type="hidden" class="age" /></td>
    <td>
        <input type="button" class="edit" class="btn" value="Edit" />
        <input type="button" class="delete" value="Delete" />
    </td>
</tr>

I have this jQuery to Delete the corresponding row that you want deleted. But I can't figure out how to select "name" and "age" of the corresponding row when you click "Edit" The code I have right now is always targeting the first inserted row. Any ideas? Thanks.

I think I need to somehow select the parent.parent of the "Edit" button and then target the "name" and "age" id's.

//jQuery
$(".delete").live('click',function() {
    $(this).parent().parent().remove();
});

$(".edit").live('click',function() {
    $('.name').clone().attr('type','text').insertAfter('.name').prev().remove();
    $('.age').clone().attr('type','text').insertAfter('.age').prev().remove();
});

@undefined, you probably meant: **unfortunately** still alive... — gdoron, Oct 18 '12 at 16:21

mgraph · Accepted Answer · 2012-10-18T16:25:10.953

0

first convert id to class:

<td><input type="hidden" class="name" /></td>
<td><input type="hidden" class="age" /></td>

then :

$("#edit").live('click',function() { $name =
   var name =  $(this).closest(".insertedRow").find(".name");
   var age =  $(this).closest(".insertedRow").find(".age");

   name.clone().attr('type','text').insertAfter(name).prev().remove();
   age.clone().attr('type','text').insertAfter(age).prev().remove();
});

edited Oct 18 '12 at 16:25

answered Oct 18 '12 at 16:17

mgraph

15,238
4
41
75

So is it okay to do this in Internet Explorer? – user1738750 Oct 18 '12 at 16:42
@user1738750 with jQuery you will never have issue with any browser – mgraph Oct 18 '12 at 16:52
Others are saying that Internet Explorer does not allow you to change the type attr and will throw and error – user1738750 Oct 18 '12 at 16:54
@user1738750 for that i don't know, but there is an other solution for that is to make 2 name input one is hidden and the other is text and show the one you want – mgraph Oct 18 '12 at 16:56

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

You can't clone an element with an id attribute on it, unless you change its id.

Please read this to understand why it gives you the first element every time.

edited May 23 '17 at 11:56

Community

1
1

answered Oct 18 '12 at 16:18

gdoron

147,333
58
291
367

Can we make it a class instead? – user1738750 Oct 18 '12 at 16:19

score 0 · Answer 3 · answered Oct 18 '12 at 16:21

0

to avoid duplicated id, you can do something like this

var lastid = $('[id^="clonedInput"]').length + 1;
$(".clonedInput").last().clone().attr('id', 'clonedInput' + lastid).appendTo("body")

or use a .class

answered Oct 18 '12 at 16:21

RASG

5,988
4
26
47

I dont think they need to be id's. I have changed them to classes – user1738750 Oct 18 '12 at 16:24

score 0 · Answer 4 · answered Oct 18 '12 at 16:24

This are the values:

$(this).parent().find(".name").text();
$(this).parent().find(".age").text();

and your edit function:

$(".edit").live('click',function() {
    $('.name').clone().attr('type','text').insertAfter('.name').value($(this).parent().find(".name").text()).prev().remove();
    $('.age').clone().attr('type','text').insertAfter('.age').value($(this).parent().find(".age").text()).prev().remove();
});

score 0 · Answer 5 · answered Oct 18 '12 at 16:25

0

For one thing, your click event handler is targeting an ID named '#name'... but your cloning of the rows ensures you're going to have multiple elements with the same ID.

Also, jQuery's documents make it fairly clear that changing the type attr is prohibited: http://api.jquery.com/attr/

Note: jQuery prohibits changing the type attribute on an or element and will throw an error in all browsers. This is because the type attribute cannot be changed in Internet Explorer.

Also, as others have pointed out, you probably should not be using .live() as it's deprecated (means it's going away in the indeterminate future)... you should look at using .on(), as that's the supported direction.

answered Oct 18 '12 at 16:25

Jason M. Batchelor

2,951
16
25

Okay thanks for the awnser. I thought clone was a work around for changing the type attr. – user1738750 Oct 18 '12 at 16:34
If you're going to those lengths, rather than touching the DOM so many times in one call, it might be a lot better for you to simply create a string representation of what you want to make, and insert that with .append(). The more often you do a selector-call, the more expensive the call is, as it forces jQuery to reparse the DOM and find elements for you. Last I checked, `.html("
mow mow
")` is still more performant than `$("
").attr('blah','boo').html('mow mow').css('border','red')`. – Jason M. Batchelor Oct 18 '12 at 16:45

jQuery syntax to select class in related parent

5 Answers5