Я хочу уменьшить число с помощью jQuery. Например. существует 5 строк и когда пользователь удаляет 4-ю строку. то номер пятой строки должен быть №4. На данный момент мой код работает только тогда, когда пользователь удаляет 4-ю строку, а пятое число строк все равно No.5.Удалить 1 строку и номер заголовка auto уменьшить в jQuery
Вот мой снимок экрана и код.
Вот мой дизайн-код.
<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);
});
Вы должны перечислить весь класс '.usertitle' после нажатия кнопки удаления. –