使用 Jquery onclick 事件删除动态创建的 bootstrap 表单组

Question

我动态创建了一个带有输入字段和旁边删除按钮的表单组，此按钮需要删除：按钮、它包含的 div 和 div 那 div 包含在其中。所以本质上是包含该按钮的表单组。这是 PHP 代码：

                            <div class="form-horizontal" id="HighlightForm">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">
                                        Highlight(s)
                                    </label>
                                    <div id="highlightInput" class="input-group col-sm-8">
                                        <input type="input" name="aHighlight[]" class="form-control" />
                                        <span class="input-group-btn">
                                            <button id="add-highlight" class="form-control add-highlight"><i class="fa fa-plus"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>

jQuery部分：

$('#add-highlight').on('click', function ()
{
    $('<div class="form-group"><label class="col-sm-4 control-label"></label><div id="highlightInput" class="input-group col-sm-8"> <input type="input" name="aHighlight[]" class="form-control" /><span class="input-group-btn"> <button id="remove-highlight" class="form-control"><i class="fa fa-times"></i></button> </span></div></div>').appendTo('#HighlightForm');
});

$(document).on('click','#remove-highlight', function (e)
{
    e.preventDefault();
    $(this).parent('div').parent('div').remove();
});

我试图用 $(this) 解决按钮并解决父级 div 及其父级 div 以删除整个表单组，但这没有用。

Answer 1

我认为它应该像这样工作:

$('#remove-highlight').click(function(){
    $(_this).parents().remove();
});

Answer 2

替换此行可解决您的问题。了解 .closest

$(this).closest('#highlightInput').remove();

$('#add-highlight').on('click', function ()
{
    $('<div class="form-group"><label class="col-sm-4 control-label"></label><div id="highlightInput" class="input-group col-sm-8"> <input type="input" name="aHighlight[]" class="form-control" /><span class="input-group-btn"> <button id="remove-highlight" class="form-control"><i class="fa fa-times"></i></button> </span></div></div>').appendTo('#HighlightForm');
});

$(document).on('click','#remove-highlight', function (e)
{
    e.preventDefault();
    $(this).closest('#highlightInput').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-horizontal" id="HighlightForm">
<div class="form-group">
    <label class="col-sm-4 control-label">
        Highlight(s)
    </label>
    <div id="highlightInput" class="input-group col-sm-8">
        <input type="input" name="aHighlight[]" class="form-control" />
        <span class="input-group-btn">
            <button id="add-highlight" class="form-control add-highlight"><i class="fa fa-plus"></i></button>
        </span>
    </div>
</div>
</div>

使用 Jquery onclick 事件删除动态创建的 bootstrap 表单组

Deleting a dynamically created bootstrap form group with a Jquery onclick event

html

jquery

twitter-bootstrap-3