Javascript：如何删除div中所有输入所需的属性

我的Javascript有问题。我有一个按钮，每次单击按钮时，它会动态添加一个带有4个输入的div

所有这些输入都是必需的。我可以用一个按钮来删除所选的div。当输入不为空时，它会工作

当我想删除一个输入为空的div时，由于required属性，我不能删除。在调用删除div的操作之前，我尝试添加var测试来删除required属性，但它不起作用

看起来不难，但我的JS不是很好。有人能告诉我怎么做吗

    $(document).ready(function() {
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID
        var test = document.getElementById('test');

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).before('<div><input type="Submit" value="Supprimer" name="bouton" class="remove_field"><table style="color:black; background-color:#eee; border-radius:10px; border:none;"><tr><td><span class="description">Prénom du chat</span><input type="text" name="nom_chat[]" id="test" required/></td><td><span class="description">Age du chat</span><input type="text" name="age_chat[]" id="test" required/></td></tr><tr><td colspan="2"><span class="description">Tolérance avec les autres animaux</span><textarea name="tolerance_chat[]" style="height:100px;" id="test" required></textarea></td></tr><tr><td colspan="2"><span class="description">Description du chat</span><textarea name="description_chat[]" style="height:100px;" id="test" required></textarea></td></tr></table></div>'); //add input box

            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(test).removeAttr('required');
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });

我的HTML：

            <button class="add_field_button">Ajouter un chat</button>
            <div class="input_fields_wrap"></div>

---

您有许多问题：

附加字段中存在重复的ID。。。我现在把它们改成了一个虚拟类=测试。 为模板使用字符串文字是维护的噩梦。我已经将它移动到一个类型未知的虚拟脚本块，因此浏览器将忽略它，但您可以通过ID访问它。 相对于按下的删除按钮执行删除操作。 当您添加一个新的包装器时，对项目进行计数。 主要问题： 但主要的问题是，您在包装器之前插入了新字段，而不是在包装器内部，因此委派的事件处理程序什么也不做

以下是一个工作版本：

HTML现在看起来像是此注释模板现在可以编辑为HTML，而不是字符串：

<script id="template" type="text/template">
<div class="fields">
    <input type="Submit" value="Supprimer" name="bouton" class="remove_field">
    <table style="color:black; background-color:#eee; border-radius:10px; border:none;">
        <tr>
            <td><span class="description">Prénom du chat</span>
                <input type="text" name="nom_chat[]" class="test" required/>
            </td>
            <td><span class="description">Age du chat</span>
                <input type="text" name="age_chat[]" class="test" required/>
            </td>
        </tr>
        <tr>
            <td colspan="2"><span class="description">Tolérance avec les autres animaux</span>
                <textarea name="tolerance_chat[]" style="height:100px;" class="test" required></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2"><span class="description">Description du chat</span>
                <textarea name="description_chat[]" style="height:100px;" class="test" required></textarea>
            </td>
        </tr>
    </table>
</div>
</script>
<button class="add_field_button">Ajouter un chat</button>
<div class="input_fields_wrap"></div>

更新

要求在开始时插入新表单，在这种情况下，使用prepend而不是append：

---

您正在添加重复的ID。。。e、 g.id=测试。这是无效的HTML，jQuery将只找到第一个匹配项。你需要先用类来解决这个问题。非常感谢。现在，我需要理解以下内容：。简单的版本是，您需要将新表单附加到包装器中。以前不使用。您的close处理程序附加到兄弟姐妹而不是祖先：我现在理解代码了。但事实上，我需要在最旧的输入之前添加新的输入。这就是我以前使用而不是附加的原因。你知道我的意思吗？用prepend把它们放在开头。将更新答案。before表示作为兄弟姐妹而不是孩子插入before。如果可以，请将其标记为答案：

<script id="template" type="text/template">
<div class="fields">
    <input type="Submit" value="Supprimer" name="bouton" class="remove_field">
    <table style="color:black; background-color:#eee; border-radius:10px; border:none;">
        <tr>
            <td><span class="description">Prénom du chat</span>
                <input type="text" name="nom_chat[]" class="test" required/>
            </td>
            <td><span class="description">Age du chat</span>
                <input type="text" name="age_chat[]" class="test" required/>
            </td>
        </tr>
        <tr>
            <td colspan="2"><span class="description">Tolérance avec les autres animaux</span>
                <textarea name="tolerance_chat[]" style="height:100px;" class="test" required></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2"><span class="description">Description du chat</span>
                <textarea name="description_chat[]" style="height:100px;" class="test" required></textarea>
            </td>
        </tr>
    </table>
</div>
</script>
<button class="add_field_button">Ajouter un chat</button>
<div class="input_fields_wrap"></div>