Kyaw Zin Wai Kyaw Zin Wai - 18 days ago 5
jQuery Question

Remove 1 row and the title number auto reduce in JQuery

I want to make the number reduce with JQuery. For example. there is 5 row and when user remove 4th row. then the 5th row number should be No.4. For now, my code only work when user remove 4th row then the 5th row number is still No.5. Please help me out. This is my urgent project.

Here is my screenshot and Code.

enter image description here

Here is my design code.

<div id="userlistOptionBox" class="row" style="background:#f5f5f5;margin:0px;padding:20px 0;margin-bottom: 8%;">
<div class="row user_list_show" style="margin-bottom:20px;">
<div class="col-sm-10">
<h3 class="usertitle" style="margin:0 0 0 5px;margin-bottom: 10px;">1user</h3>
<div class="row" style="margin:0 0 0 5px;">
<div class="col-sm-6">
<label for="user_name">Name</label><br>
<input type="text" name="user_name[]" style="width: 100%;height: 30px;" value="{$user_name}">
</div>
<div class="col-sm-6">
<label for="mail_addr">Email</label><br>
<input type="text" required oninvalid="setCustomValidity('ユーザー名を入れてください')" name="mail_addr[]" style="width: 100%;height: 30px;" size="30" value="{$mail_addr}">
</div>
</div>
</div>
<div class="col-sm-2" style="margin-top:7%;">
<a class="btn btn-default add_user_list" style="color:#7ec1cb;">+</a>
<a class="btn btn-default remove_user_list" style="color:#7ec1cb;">-</a>
</div>
</div>
</div>


Here is my JQuery Code.

// User Registration
var userListShowHtml = '<div class="row user_list_show" id="row1" style="margin-bottom:20px;">'+
'<div class="col-sm-10">'+
'<h3 class="usertitle" style="margin:0 0 0 5px;margin-bottom: 10px;">1user</h3>'+
'<div class="row" style="margin:0 0 0 5px;">'+
'<div class="col-sm-6">'+
'<label for="user_name">Name</label><br>'+
'<input type="text" name="user_name[]" style="width: 100%;height: 30px;" value="{$user_name}">'+
'</div>'+
'<div class="col-sm-6">'+
'<label for="mail_addr">Email</label><br>'+
'<input type="text" name="mail_addr[]" style="width: 100%;height: 30px;" size="30" value="{$mail_addr}">'+
'</div>'+
'</div>'+
'</div>'+
'<div class="col-sm-2" style="margin-top:7%;">'+
'<a class="btn btn-default add_user_list" style="color:#7ec1cb;">+</a>'+
'<a class="btn btn-default remove_user_list" style="color:#7ec1cb;">-</a>'+
'</div>'+
'</div>';


var rowno = 1;
var max = 20;
var min=1;
$("#userlistOptionBox").on('click', '.add_user_list', function(){

$('.remove_user_list').prop('disabled', false);
if (rowno<maximum) {
rowno++;
$(".user_list_show:last").after(userListShowHtml.replace(/1user/g,rowno+"user"));
}
else if (rowno==max) {
$('.add_user_list').prop('disabled', true);
}
});

$("#userlistOptionBox").on('click', '.remove_user_list', function(){

rowno--

if (rowno==minimum) {
$('.remove_user_list').prop('disabled', true);

}

$(this).closest('.user_list_show').remove();

$('.add_user_list').prop('disabled', false);

});

Answer

You can loop through all the user list one by one and then you can update their title as follow. Please check the .remove_user_list click handler for code which I have added for it.

//loop through all user_list_show and update the title
     $('.user_list_show').each(function(index) {
       var userNumber = index + 1;
       $(this).find(".usertitle").text(userNumber + "user");
     });

   var userListShowHtml = '<div class="row user_list_show" id="row1" style="margin-bottom:20px;">' +
     '<div class="col-sm-10">' +
     '<h3 class="usertitle" style="margin:0 0 0 5px;margin-bottom: 10px;">1user</h3>' +
     '<div class="row" style="margin:0 0 0 5px;">' +
     '<div class="col-sm-6">' +
     '<label for="user_name">Name</label><br>' +
     '<input type="text" name="user_name[]" style="width: 100%;height: 30px;" value="{$user_name}">' +
     '</div>' +
     '<div class="col-sm-6">' +
     '<label for="mail_addr">Email</label><br>' +
     '<input type="text" name="mail_addr[]" style="width: 100%;height: 30px;" size="30" value="{$mail_addr}">' +
     '</div>' +
     '</div>' +
     '</div>' +
     '<div class="col-sm-2" style="margin-top:7%;">' +
     '<a class="btn btn-default add_user_list" style="color:#7ec1cb;">+</a>' +
     '<a class="btn btn-default remove_user_list" style="color:#7ec1cb;">-</a>' +
     '</div>' +
     '</div>';


   var rowno = 1;
   var max, maximum = 20;
   var minimum = 1;
   $("#userlistOptionBox").on('click', '.add_user_list', function() {

     $('.remove_user_list').prop('disabled', false);
     if (rowno < maximum) {
       rowno++;
       $(".user_list_show:last").after(userListShowHtml.replace(/1user/g, rowno + "user"));
     } else if (rowno == max) {
       $('.add_user_list').prop('disabled', true);
     }
   });

   $("#userlistOptionBox").on('click', '.remove_user_list', function() {

     rowno--

     if (rowno == minimum) {
       $('.remove_user_list').prop('disabled', true);

     }

     $(this).closest('.user_list_show').remove();

     $('.add_user_list').prop('disabled', false);


     //loop through all user_list_show and update the title
     $('.user_list_show').each(function(index) {
       var userNumber = index + 1;
       $(this).find(".usertitle").text(userNumber + "user");
     });
   }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="userlistOptionBox" class="row" style="background:#f5f5f5;margin:0px;padding:20px 0;margin-bottom: 8%;">
  <div class="row user_list_show" style="margin-bottom:20px;">
    <div class="col-sm-10">
      <h3 class="usertitle" style="margin:0 0 0 5px;margin-bottom: 10px;">1user</h3> 
      <div class="row" style="margin:0 0 0 5px;">
        <div class="col-sm-6">
          <label for="user_name">Name</label>
          <br>
          <input type="text" name="user_name[]" style="width: 100%;height: 30px;" value="{$user_name}">
        </div>
        <div class="col-sm-6">
          <label for="mail_addr">Email</label>
          <br>
          <input type="text" required oninvalid="setCustomValidity('ユーザー名を入れてください')" name="mail_addr[]" style="width: 100%;height: 30px;" size="30" value="{$mail_addr}">
        </div>
      </div>
    </div>
    <div class="col-sm-2" style="margin-top:7%;">
      <a class="btn btn-default add_user_list" style="color:#7ec1cb;">+</a>
      <a class="btn btn-default remove_user_list" style="color:#7ec1cb;">-</a>
    </div>
  </div>
</div>