Как остановить добавление кнопки удаления в первую форму в djagno formset?
Я создаю динамическую форму, используя наборы форм. В основном, когда пользователь нажимает на кнопку "Добавить поле", создается новая форма, а когда пользователь нажимает на иконку корзины, форма должна быть удалена!
Теперь проблема в том, что иконка удаления отображается на первой форме по умолчанию, поэтому при нажатии на иконку форма по умолчанию также удаляется! Как добавить иконку удаления на клонированные формы?
<script>
function updateElementIndex(el, prefix, ndx) {
var id_regex = new RegExp('(' + prefix + '-\\d+)');
var replacement = prefix + '-' + ndx;
if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
if (el.id) el.id = el.id.replace(id_regex, replacement);
if (el.name) el.name = el.name.replace(id_regex, replacement);
}
function addForm(btn, prefix) {
var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
var row = $('.dynamic-form:first').clone(true).get(0);
$(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
$(row).children().not(':last').children().each(function() {
updateElementIndex(this, prefix, formCount);
$(this).val('');
});
$(row).find('.delete-row').click(function() {
deleteForm(this, prefix);
});
$('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
return false;
}
function deleteForm(btn, prefix) {
$(btn).parents('.dynamic-form').remove();
var forms = $('.dynamic-form');
$('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
for (var i=0, formCount=forms.length; i<formCount; i++) {
$(forms.get(i)).children().not(':last').children().each(function() {
updateElementIndex(this, prefix, i);
});
}
return false;
}
</script>
<script>
$(function () {
$('.add-row').click(function() {
return addForm(this, 'form');
});
$('.delete-row').click(function() {
return deleteForm(this, 'form');
})
})
</script>
Вот сниппеты, которые я использую, мне нужно добавить
<a id="remove-{{ form.prefix }}-row" href="javascript:void(0)" class="delete-row">Delete <em class="icon ni ni-trash-fill text-danger fs-15px"></em></a>
только на клонированной форме, форма по умолчанию не должна содержать этого! Пожалуйста, помогите
Делегат
Замените 'tr' на 'form', если это форма, или '.row' на что угодно, чем является '.row'
$("#tb").on('click', '.delete-row', function() {
$(this).closest('tr').remove()
});
tbody tr:first-child button.delete-row {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody id="tb">
<tr>
<td>Row 0</td>
<td><button class="delete-row">Click 0</button></td>
</tr>
<tr>
<td>Row 1</td>
<td><button class="delete-row">Click 1</button></td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="delete-row">Click 2</button></td>
</tr>
</tbody>
</table>