Question

我通过jquery添加文本框，对于一个文本框，它正在删除perfeclty但是当我添加两个文本框时，它现在会删除它们。

这是jquery

<script>

$(document).ready(function($){
    $('.product-form .add-product').click(function(){
        var n = $('.text-product').length + 1;

        var product_html = $('<p class="text-product"><label for="product' + n + '">Name <span class="product-number">' + n + '</span></label> <input required type="text" name="productnames[]" value="" id="product' + n + '" /> <label for="productprice' + n + '">Price <span class="product-number">' + n + '</span></label> <input required type="text" name="productprices[]" value="" id="productprice' + n + '" /><a href="#" class="remove-product">Remove</a></p>');
        product_html.hide();
        $('.product-form p.text-product:last').after(product_html);
        product_html.fadeIn('slow');
        return false;
    });
    $('.product-form').on('click', '.remove-category', function(){
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.product-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});
</script>

这是我的HTML

<div>
        <form>

            <div class="product-form">
                <p class="text-product">
                    <label for="product1">Name <span class="product-number">1</span></label>
                    <input required type="text" name="productnames[]" value="" id="product1" />
                    <label for="product1">Price <span class="product-number">1</span></label>
                    <input required type="text" name="productprices[]" value="" id="product1" />
                    <div>
                        <a class="add-product" href="#">Add More</a>
                    </div>
                </p>
            </div>
            <div>
                <input type="submit" name="submitDetails" value="Finish"/>
            </div>

        </form>
    </div>

如果只添加了一个用于实例productnames的文本框，那么它的删除功能可以正常工作，但是当我添加botch产品名称和productprices时，文本框删除功能不会同时删除

Answer 1

您的代码应该是$('.product-form').on('click', '.remove-product', function()而不是'click', '.remove-category'。另外，不要将Add More div元素放在段落元素中。编号也有点突破，但你可以想出来。

动态文本框未删除

1 个答案: