javascript - Jquery 在 DOM 中插入和从 DOM 中删除

Question

super 简单，但我很惊讶。我有一个简单的脚本，可以在单击时将输入加载到 DOM。

$('.add-more-games').find('button').click(function(){
    var gameInput = [
                    '<div class="form-group">',
                    '<input type="text" name="gameInfo[]" class="form-control input-global add-detail-input"/>',
                    '<span class="glyphicon glyphicon-remove detail-input-remove"></span>',
                    '</div>'
                    ].join('');

    $(gameInput).insertBefore('.add-more-games');
});

$('.detail-input-remove').click(function(){
    $(this).parent('.form-group').detach();
});

现在，在 gameInput 变量中，有一个带有“detail-input-remove”类的 span 元素。我做了一些 CSS 以使“X”悬停在输入元素上，当我关注输入元素时它变得可见。我想做的就是单击“X”并从 DOM 中删除该表单组。当我单击时，它不会响应任何内容(甚至是简单的“hello world”警报)。这是因为页面加载时该元素不在 DOM 中吗？

Answer 1

尝试

$(document).on('click', '.detail-input-remove', function(){
    $(this).parent('.form-group').empty();
});