0

我正在使用表单集创建动态表单。因此，基本上当用户单击“添加字段”按钮时，将创建一个新表单，当用户单击垃圾图标时，应删除该表单！

现在的问题是，删除图标也显示在第一个默认表单上，所以如果单击该图标，默认表单也会被删除！如何在克隆的表单上添加删除图标？

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

仅在克隆表单上，默认表单不应包含此！请帮忙

4

1 回答 1

0

代表

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

于 2021-09-19T16:09:14.357 回答