Select Elements in nested Divs using JQuery

Question

I have the following html markup inside a Div named item and I want to select all the elements (inside nested divs) and clear the values. As shown in following given Jquery I have managed to access elements in each Div by using.children().each(). But the the problem is .children().each()goes one level down at a time from the parent div, so I have repeated the same code block with multiple .children() to access the elements inside nested Divs, can anyone suggest me a method to do this without repeating the code for N number of nested divs .

html markup

<div class="item">
    <input type="hidden" value="1234" name="testVal">

    <div class="form-group" id="c1">
        <div class="controls ">
            <input type="text" value="Results" name="s1" maxlength="255" id="id2">
        </div>
    </div>
    <div class="form-group" id="id4">
        <input type="text" value="Results" name="s12" maxlength="255" id="id225">

        <div class="form-group" id="id41">
            <input type="text" value="Results" name="s12" maxlength="255" id="5">

            <div class="form-group" id="id42">
                <input type="text" value="Results" name="s12" maxlength="255" id="5">

                <div class="form-group" id="id43">
                    <input type="text" value="Results" name="s12" maxlength="255" id="id224">
                </div>
            </div>
        </div>
    </div>
</div>

My Qjuery script

var row = $(".item:first").clone(false).get(0);
$(row).children().each(function () {
updateElementIndex(this, prefix, formCount);

if ($(this).attr('type') == 'text') {
    $(this).val('');
}
if ($(this).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) {
    $(this).val('');
}
if ($(this).attr('type') == 'file') {
    $(this).val('');
}
if ($(this).attr('type') == 'checkbox') {
    $(this).attr('checked', false);
}
$(this).remove('a');
});

// Relabel or rename all the relevant bits
$(row).children().children().each(function () {
updateElementIndex(this, prefix, formCount)

if ($(this).attr('type') == 'text') {
    $(this).val('');
}
if ($(this).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) {
    $(this).val('');
}
if ($(this).attr('type') == 'file') {
    $(this).val('');
}
if ($(this).attr('type') == 'checkbox') {
    $(this).attr('checked', false);
}
$(this).remove('a');
});

Keeley Carrigan · Accepted Answer · 2013-11-04 16:10:15Z

1

Seems something like this would do the trick. You of course be more specific about which item you select.

$('.item').find('input').val('');

answered Nov 4, 2013 at 16:10

Keeley Carrigan

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-04 16:07:01Z

0

Try

var row = $(".item:first").clone(false).get(0);
$(row).find('input:not(:checkbox)').val('');
$(row).find('input:checkbox').prop('checked', false);

answered Nov 4, 2013 at 16:07

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

spacebean · Accepted Answer · 2013-11-04 16:07:54Z

0

You can use find instead of children and it will traverse all the way down the dom.

$(row).find('input').each(function () {

answered Nov 4, 2013 at 16:07

spacebean

1,5541 gold badge10 silver badges13 bronze badges

Comments

SoftwareNerd · Accepted Answer · 2013-11-05 09:24:03Z

0

Try this

 var row = $(".item:first").clone(false).get(0);
     $(row).children().each(function () {
         var $this=$(this);
         clearelements($this);
         if(element.children().length > 0)
          {
           element.children().each(function(){
              recursive(this)
            clearelements(this);
           });
         }
     });


    function recursive(element)
     {

    if(element.children().length > 0)
     {
      element.children().each(function(){
      clearelements(this);
      });
     }
 }

      function clearelements(obj){
         if ($(obj).attr('type') == 'text') {
            $(obj).val('');
          }
         if ($(obj).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken'))   {
           $(obj).val('');
           }
           if ($(obj).attr('type') == 'file') {
           $(obj).val('');
            }
           if ($(obj).attr('type') == 'checkbox') {
           $(obj).attr('checked', false);
            }
           $(obj).remove('a');
         }

or simply you can access them all at a time

    $(".item :input:not([name=csrfmiddlewaretoken]).val('');
    $(".item :checkbox).prop('checked', false);
    $(".item a").remove();

edited Nov 5, 2013 at 9:24

answered Nov 4, 2013 at 16:14

SoftwareNerd

1,9058 gold badges29 silver badges63 bronze badges

1 Comment

PIKP Over a year ago

hi @SoftwareNerd thanks for your solution. you have used a function named recursive but you haven't called that function and you have used if(element.children().length > 0) in your 5th line of the given code and i wonder where it came form. its nice if you can give me a explanation

VijayS91 · Accepted Answer · 2016-03-16 17:00:04Z

0

$(".item :input:not([name=csrfmiddlewaretoken])").val('');
$(".item :checkbox").prop("checked", false);
$(".item a").remove();

edited Mar 16, 2016 at 17:00

VijayS91

1,53123 silver badges40 bronze badges

answered Nov 4, 2013 at 16:07

Barmar

789k57 gold badges554 silver badges669 bronze badges

Collectives™ on Stack Overflow

Select Elements in nested Divs using JQuery

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related