how can I re-index the array property name using jquery

Question

Is this possible to re-index the name="best_answer" array. after I'm deleting, I have this example after I delete index 3. as you can see I have the name="best_answer4[]" it should be name="best_answer3[]" after re-index. I have no idean how can I achieve my goal.

ol index 0 and 1 has no name=best_naswer

ol that has name=best_naswer are dynamically added

<div class="dynamic_div2" >
   <ol class="wrapperdiv" type="a">
       <div class="mydel">
         <div class="form-group">
            <button type="button"  class="btn "><i class="fas fa-trash "></i></button>
         </div>
      </div>
      
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" value="dsf" name="answer0[]" class="form-control">
         <div class="input-group-prepend">
            <span class="input-group-text"><input type="radio" value="0" ></span>
         </div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" value="asdf" name="answer0[]" class="form-control">
         <div class="input-group-prepend">
            <span class="input-group-text"><input type="radio" checked="" value="1" ></span>
         </div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" value="sdf" name="answer0[]" class="form-control">
         <div class="input-group-prepend">
            <span class="input-group-text"><input type="radio" value="2" ></span>
         </div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" value="sdfsdf" name="answer0[]" class="form-control">
         <div class="input-group-prepend">
            <span class="input-group-text"><input type="radio" value="3" ></span>
         </div>
      </div>
   </ol>
   
   
   <ol class="wrapperdiv" type="a">
    <div class="mydel">
         <div class="form-group">
            <button type="button"  class="btn "><i class="fas fa-trash "></i></button>
         </div>
      </div>
      
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" value="fsd" name="answer1[]" class="form-control">
         <div class="input-group-prepend">
            <span class="input-group-text"><input type="radio" value="0" ></span>
         </div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" value="df" name="answer1[]" class="form-control">
         <div class="input-group-prepend">
            <span class="input-group-text"><input type="radio" checked="" value="1" ></span>
         </div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" value="dsfsd" name="answer1[]" class="form-control">
         <div class="input-group-prepend">
            <span class="input-group-text"><input type="radio" value="2" ></span>
         </div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" value="fsdf" name="answer1[]" class="form-control">
         <div class="input-group-prepend">
            <span class="input-group-text"><input type="radio" value="3" ></span>
         </div>
      </div>
   </ol>
   
   
   <ol class="wrapperdiv" type="a">
   <div class="mydel">
         <div class="form-group">
            <button type="button"  class="btn "><i class="fas fa-trash "></i></button>
         </div>
      </div>
     
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" name="best_answer2[]" class="form-control">
         <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="0" ></span></div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" name="best_answer2[]" class="form-control">
         <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="1" ></span></div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" name="best_answer2[]" class="form-control">
         <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="2" ></span></div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" name="best_answer2[]" class="form-control">
         <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="3" ></span></div>
      </div>
   </ol>
   
   
   <ol class="wrapperdiv" type="a">
    <div class="mydel">
         <div class="form-group">
            <button type="button"  class="btn "><i class="fas fa-trash "></i></button>
         </div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" name="best_answer4[]" class="form-control">
         <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="0" ></span></div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" name="best_answer4[]" class="form-control">
         <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="1" ></span></div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" name="best_answer4[]" class="form-control">
         <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="2" ></span></div>
      </div>
      <div class="input-group mb-3">
         <li> </li>
         <input type="text" name="best_answer4[]" class="form-control">
         <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="3" ></span></div>
      </div>
   </ol>
   
   
</div>

Why do you need the number in the name and not just use "best_answer[]" for all of them? That is standard array syntax for form controls — charlietfl
– charlietfl, Commented Feb 27, 2021 at 19:57

uingtea · Accepted Answer · 2021-02-27 20:12:37Z

loop through ol then loop again for li then set the attribute using .attr()

$('.removeOl').on('click', function() {
  this.parentElement.remove(); // remove this <ol>
  // rebuild the index
  $('ol').each(function(i, ol) {
    $(ol).find('input').each(function(j, input) {
      $(input).attr("name", `best_answer${i}[]`)
    })
  })
})

ol{border: 1px solid #bbb;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic_div2">
  
  <ol class="wrapperdiv" type="a">
    <div class="input-group mb-3">
      <li> </li>
      <input type="text" value="dsf" name="best_answer0[]" class="form-control">
      <div class="input-group-prepend">
        <span class="input-group-text"><input type="radio" value="0"></span>
      </div>
    </div>
    <button class="removeOl">remove 0</button>
  </ol>
  
  <ol class="wrapperdiv" type="a">
    <div class="input-group mb-3">
      <li> </li>
      <input type="text" value="fsd" name="best_answer1[]" class="form-control">
      <div class="input-group-prepend">
        <span class="input-group-text"><input type="radio" value="0"></span>
      </div>
    </div>
    <button class="removeOl">remove 1</button>
  </ol>
  
  <ol class="wrapperdiv" type="a">
    <div class="input-group mb-3">
      <li> </li>
      <input type="text" name="best_answer2[]" class="form-control">
      <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="0"></span></div>
    </div>
    <button class="removeOl">remove 2</button>
  </ol>
  
  <ol class="wrapperdiv" type="a">
    <div class="input-group mb-3">
      <li> </li>
      <input type="text" name="best_answer3[]" class="form-control">
      <div class="input-group-prepend"><span class="input-group-text"><input type="radio" value="0"></span></div>
    </div>
    <button class="removeOl">remove 3</button>
  </ol>
  
</div>

Hi thank you I edited my post, I adjust your code to target only best_answer your loop helps me thank you so much.

Collectives™ on Stack Overflow

how can I re-index the array property name using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related