Question

我的Javascript存在问题。我有一个按钮，每次点击它（按钮）动态添加一个带4个输入的div。

所有这些输入都是必需的。我可以使用删除所选div的按钮删除div。它在输入不为空时有效。

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

看起来并不难，但我在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>

Answer 1

你有很多问题：

附加字段中的重复ID ...我现在将其更改为虚拟class="test"。
对模板使用字符串文字是一项维护噩梦。我已将其移至未知类型的虚拟脚本块，因此浏览器将忽略它，但您可以通过ID访问它。
删除相对于删除按钮的删除。
在您添加新项目时计算项目（计算包装器的子项）。

主要问题： 但主要的问题是你在包装器之前插入新字段而不在其中，所以你的委托事件处理程序什么也没做。

以下是工作版本：http://jsfiddle.net/TrueBlueAussie/q6w13L8f/1/

 $(document).ready(function () {
     var max_fields = 2; //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'); // UNUSED

     $(add_button).click(function (e) { //on add input button click
         var count = wrapper.children().length
         e.preventDefault();
         if (count < max_fields) { //max input box allowed
             $(wrapper).append($('#template').html()); //add input box
         }
     });

     $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
         e.preventDefault();
         $(this).closest('.fields').remove();
     })
 });

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：

http://jsfiddle.net/TrueBlueAussie/q6w13L8f/2/

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

1 个答案: