Estoy creando un formulario dinámico usando conjuntos de formularios. Entonces, básicamente, cuando el usuario haga clic en el botón "Agregar campo", se creará un nuevo formulario y cuando el usuario haga clic en el ícono de la papelera, ¡el formulario debe eliminarse!
Ahora el problema es que, el ícono de eliminar también se muestra en el primer formulario predeterminado, por lo que si hace clic en el ícono, ¡el formulario predeterminado también se elimina! ¿Cómo agregar el ícono de eliminar en los formularios clonados?
<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>Estos son los fragmentos que estoy usando, necesito agregar
<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>solo en el formulario clonado, ¡el formulario predeterminado no debería contener esto! Por favor ayuda
Delegar
Cambie 'tr' a 'form' si es un formulario o '.row' para lo que sea '.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>