Question

你好我试着写这个代码为每个输入添加一个删除btn，我通过javascript添加每个没有问题：·

但删除btn它根本不起作用，我想你会更快地看到我的错误，导致我真的是一个新手javascript。希望你能帮帮我..

$(document).ready(function () {
    var i = $('.field').size() + 1;
    $('#add').click(function () {
        $('<div class="fieldss' + i + '"><label for="link' + i + '">Video/Link</label><input type="text" class="field' + i + '" name="link' + i + '" value="' + i + '" /><a href="#" id="remove' + i + '">Remove</a></div>').fadeIn('slow').appendTo('.inputs');
        i++
    });
    $('#remove' + i + '').click(function () {
        $('.fieldss' + i + '').remove();
        i--
    });
    $('#reset').click(function () {
        while (i > 2) {
            $('.field:last').remove();
            i--
        }
    });
    $('.submit').click(function () {
        var answers = [];
        $.each($('.field'), function () {
            answers.push($(this).val())
        });
        if (answers.length == 0) {
            answers = "none"
        }
        alert(answers);
        return false
    })
});

问题必须在删除btn代码，因为我不知道如何设置它像这样...我用它像这样，但这删除只是添加的最后一项，我需要删除btn为每个。

 $('#reset').click(function () {
     while (i > 2) {
         $('.fieldss:last').remove();
         i--;
     }
 });

Answer 1

由于您是动态添加它，因此您可以将事件委托绑定事件用于存在的父级。使用类remove将其添加到remove元素。您也可以使用<div class="fieldss">然后： -

$('#add')
        .click(function () {
        $('<div class="fieldss"><label for="link' + i + '">Video/Link</label><input type="text" class="field' + i + '" name="link' + i + '" value="' + i + '" /><a href="#" id="remove' + i + '" class="remove">Remove</a></div>')
            .fadeIn('slow')
            .appendTo('.inputs');
        i++;
    });

$(document).on('click','.remove', function() { 
// use a container selector instead of document.

   $(this).closest('.fieldss').remove();
});

在javascript上设置删除按钮

1 个答案: