Why can't I remove an attribute of all children?

Question

I have a cloned div containing input elements, all of which are disabled. I am trying to use the following JQuery code to remove the disabled attribute of each of the div's children.

clonedElement.children().removeAttr('disabled');

I do not have a ton of JQuery experience, so I am probably misunderstanding the way this is supposed to work. How should I be going about removing the "disabled" attribute from all children of the cloned node?

If it helps, clonedElement was created with the JQuery .clone() method.

HTML I AM USING TO TEST---

        <div id="original_item" class="hidden">
            <div class="row_submit">
                <div class="med_field">
                    <p>Product:</p>
                    <select name="product[]">
                        <option></option>
                    </select>
                </div>
                <div class="small_field">
                    <p>Type:</p>
                    <select name="type[]">
                        <option></option>
                    </select>
                </div>
                <div class="small_field">
                    <p>Price:</p>
                    <input type="text" name="price[]" value="test" disabled="disabled" />
                </div>
                <div class="small_field">
                    <p>Quantity:</p>
                    <input type="text" name="quantity[]" />
                </div>
                <img onclick="removeItem(this);" title="Remove Item" style="margin: 18px 0 0 12px;" src="icons/cancel.gif" />
            </div>
            <input type="hidden" name="warehouse_data[]" />
        </div>

Could you show the HTML? – lonesomeday Jun 07 '11 at 18:48 — lonesomeday, Jun 07 '11 at 18:48

score 10 · Accepted Answer · answered Jun 07 '11 at 18:57

10

children only looks in immediate children and if the clonedElement is not one of med_field/small-field then it would not work.

You can use find() instead to search for elements beyond immediate children.

i.e.

//for jQuery < 1.6
$("*", clonedElement).removeAttr("disabled");
//or
clonedElement.find("*").removeAttr("disabled");

//for jQuery >= 1.6
$("*", clonedElement).removeProp("disabled");
//or
clonedElement.find("*").removeProp("disabled");

answered Jun 07 '11 at 18:57

Chandu

81,493
19
133
134

Perfect. The children thing definitely makes sense now that I think about it. Thank you. – dqhendricks Jun 07 '11 at 19:06
Rather than using the "*" selector, I would just select the elements that you need: `clonedElement.find('input,select')`. While it doesn't make a difference in this situation, it's more efficient, and it's good practice to avoid doing things you didn't intend to do. – Jamie Treworgy Jun 07 '11 at 19:27
@Jamietre: If OP is using this for removing just the disabled attribute, then yes...we can simple use input/select selectors – Chandu Jun 07 '11 at 19:33
Disabled only applies to form controls, so that was my assumption :) http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1 – Jamie Treworgy Jun 07 '11 at 19:41
@Jamietre: Yes, disabled applies to the input elements and that's why I agreed with you (if the user was indeed only looking for disabled attribute) – Chandu Jun 07 '11 at 19:44

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

0

jQuery <1.6 your current code should work.

jQuery 1.6+ do this: clonedElement.children().removeProp('disabled');

See this question .prop() vs .attr() for reasons why

edited May 23 '17 at 11:43

Community

1
1

answered Jun 07 '11 at 18:49

Naftali

144,921
39
244
303

`.prop` and `.attr` are both "write to many, read from first only" – Alnitak Jun 07 '11 at 18:54

score 0 · Answer 3 · answered Jun 07 '11 at 18:49

0

as long as clonedElement is a jquery element you can do:

clonedElement.children().each(function() {
    $(this).removeAttr('disabled');
});

answered Jun 07 '11 at 18:49

Jeremy B.

9,168
3
45
57

Why can't I remove an attribute of all children?

3 Answers3