如何删除视图中动态添加的控件答案

【问题标题】：How to Remove dynamically added controls in the view如何删除视图中动态添加的控件
【发布时间】：2020-08-23 01:53:56
【问题描述】：

当您单击这样的按钮时，我会在下面的 div 中动态添加控件：

                                <div class="column" id="addkey" style="width: 200px">

                                </div>
                                <div class="column" id="main1" style="width: 150px">

                                </div>
                                <div class="column" id="docmanindex" style="width: 150px">

                                </div>
                            </div>

函数 AddPrimaryClick() {

        var selectedprimarykey = $("#ddlprimarykey :selected").text();

        var one = chkkeyId + i;

        var two = radioId + i;

        var three = chkindxid + i;



        $('#addkey').append('<input type="checkbox"' + ' id = ' + one + '/> ' + selectedprimarykey + '<br />' + '<br />');

        $('#main1').append('<input type="radio" ' + ' id = ' + two + '/> ' + '<br />' + '<br />');

        $('#docmanindex').append('<input type="checkbox" ' + ' id = ' + three + '/> ' + '<br />' + '<br />');

        i = i + 1;



    };

如何删除在按钮单击事件上检查的上述控件？

【问题讨论】：

标签： javascript jquery .net asp.net-mvc

【解决方案1】：

你可以这样做：

$("#button").on("click", function() {
	$("input:checked").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="radio" name="test" />
<input type="radio" name="test" />
<button id="button">
  Remove
</button>

【讨论】：

@sin_user 很高兴我能帮上忙 :)
我还需要删除选中复选框旁边的其他控件（未选中）。它们也是从我上面提到的代码中动态添加的。我试图通过对 id 进行硬编码来删除 $("#mainkey1/").remove();但它没有工作。你能请教吗？如果不清楚，请告诉我。
@sin_user 如果您已经尝试通过对 id 进行硬编码来删除它并且它不起作用，那么似乎还有另一个问题。您检查控制台是否有错误？

【解决方案2】：

您可以遍历所有选中的复选框和选中的单选按钮，并使用 jquery remove() 函数将其删除

$("input[type='checkbox']:checked, input[type='radio']:checked").each(function(){
    $(this).remove();
});

【讨论】：