在jQuery中刪除1行和標題號自動減少

Question

我想用jQuery來減少數量。例如。有5行，當用戶刪除第4行時。那麼第五排的號碼應該是第四號。目前，我的代碼只在用戶刪除第四行時才起作用，然後第五行的編號仍然是No.5。

這是我的截圖和代碼。

這是我設計的代碼。

<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> 

這是我的JQuery代碼。

// 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 1

您可以循環遍歷所有用戶列表，然後您可以更新他們的標題如下。請檢查我爲其添加的代碼的.remove_user_list點擊處理程序。

//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>

Answer 2

你需要經過所有行和重置用戶的標題文本。我可能會寫一個函數來做到這一點。例如：

function updateUserTitles() { 
    var row = 1; 
    $("div").filter(".user_list_show").each(function(){ 
      $(".usertitle h3").html(row + "user"); 
      row++; 
    }); 
}