删除附加的html代码

Question

我目前遇到一个问题，无法使用jQuery删除附加的html。

现在有效的是我可以附加所需的html，它看起来不错，但是删除不起作用。 它仅在重新加载第一个已加载的html时起作用，而我附加的其他html则不起作用-我不知道为什么。

这是我添加html的代码：

$("#adWasteStream").click(function(){
    var newTxt = $('<div class="row-waste-container width-100"><div class="row"><div class="col-md-9"><p>Stream 1</p></div><div class="col-md-3"><button class="btn btn-add-waste deleteWasteStream"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove Waste Stream</button></div><div class="form-group col-md-7"><label for="business-mng-name" class="control-label">Waste Stream</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="Co-mingled recycling"><span class="help-block"></span></div></div><div class="row width-100"><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Volume (m <sup>3</sup>)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="50"><span class="help-block"></span></div><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Weight (t)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="20"><span class="help-block"></span></div><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Cost ($)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="400"><span class="help-block"></span></div></div></div>');
    $(".row-cont-main").append(newTxt);
});

我的删除代码：

$(".deleteWasteStream").click(function(){
      var curRow = $(this).parents('div.row-waste-container');
      curRow.remove();
});

我不需要使用Id，因为它们需要在所有元素中都是唯一的（出于后端目的）。

html的结构如下所示：

<div class="row-waste-container width-100">
                                    <div class="row">
                                        <div class="col-md-9">
                                            <p>Stream 1</p>
                                        </div>
                                        <div class="col-md-3">
                                            <button class="btn btn-add-waste deleteWasteStream"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove Waste Stream</button>
                                        </div>
                                        <div class="form-group col-md-7">
                                            <label for="business-mng-name" class="control-label">Waste Stream</label>
                                            <input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="Co-mingled recycling">
                                            <span class="help-block"></span>
                                        </div>
                                    </div><!-- end row -->
                                    <div class="row width-100">
                                        <div class="form-group col-md-4">
                                            <label for="business-mng-name" class="control-label">Volume (m <sup>3</sup>)</label>
                                            <input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="50">
                                            <span class="help-block"></span>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="business-mng-name" class="control-label">Weight (t)</label>
                                            <input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="20">
                                            <span class="help-block"></span>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="business-mng-name" class="control-label">Cost ($)</label>
                                            <input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="400">
                                            <span class="help-block"></span>
                                        </div>
                                    </div><!-- end row -->
                                </div><!-- end row-waste container -->

Answer 1

您需要更改click事件处理程序以处理动态附加的html。

使用以下代码更新删除点击处理程序

$("body").on('click' , '.deleteWasteStream' , function(){
      var curRow = $(this).parents('div.row-waste-container');
      curRow.remove();
});

Answer 2

您不能在动态对象/ html上使用.click() 。 您可以使用.on()

$("body").on('click', '.deleteWasteStream', function( event ) {
    var curRow = $(this).parents('div.row-waste-container');
    curRow.remove();
});

文档： http : //api.jquery.com/on/

Answer 3

由于元素是动态创建的，因此它们不会像预渲染的元素（在您的网页加载到浏览器中时渲染的元素）那样在DOM中注册。 最好的解决方案是使用on事件绑定器将动态创建的元素绑定到预渲染的元素

$('.row-cont-main').on('click','.deleteWasteStream',function(){
     var curRow = $(this).parents('div.row-waste-container');
     curRow.remove();
});