Javascript 如何动态删除整个div

我在一个div中有两个按钮：

加号按钮 减号按钮 当我单击加号按钮时，我正在通过克隆创建另一个相同的div，它工作正常，但当我单击减号按钮时，以同样的方式，我需要删除一个完整的div，下面是我的代码：

$document.readyfunction{ var addmorecoditions=functionevt{ var$div=document.getElementById'query_area'； var queryDiv=document.getElementsByClassName'search_criteria1'； //$div.appendChild$div； $.search\u准则1:last.clone.insertAfterdiv.search\u准则1:last； }; }; var removeConditions=函数EV{ $'query_area'。删除$ev.parent[0]； } .m-form__群{ 左侧填充：30px； 右侧填充：30px； } .行{ 显示器：flex； 柔性包装：包装； 右边距：-15px； 左边距：-15px； } = !=

---

首先，在使用内联事件时，需要删除$document.ready。内联处理程序希望函数在全局范围内。在您的示例中，则在$document.ready的本地范围内

删除时，可以使用选择要删除的各个图元

var addmorecoditions=functionevt{ var$div=document.getElementById'query_area'； var queryDiv=document.getElementsByClassName'search_criteria1'； //$div.appendChild$div； $.search\u准则1:last.clone.insertAfterdiv.search\u准则1:last； }; var removeConditions=函数EV{ $ev.closest'.search_criteria1'.remove； } .m-form__群{ 左侧填充：30px； 右侧填充：30px； } .行{ 显示器：flex； 柔性包装：包装； 右边距：-15px； 左边距：-15px； } = !=

---

您需要转到父元素，然后将其删除，如下所示：

$(ev).closest('.search_criteria1').remove();

注1：克隆div时，将使用用户输入进行克隆，这意味着如果用户在上次输入中键入100，然后单击加号按钮，则新克隆div中的输入值也将为100。如果要初始化新实例的输入/选择，可以使用克隆的div cloned_div作为变量，首先初始化它们，然后将它们推送到视图中

注2：代码中不需要queryDiv和$div变量，只需删除它们即可

var addmorecoditions=functionevt{ var last\u div=div.search\u准则1:last； var cloned_div=$last_div.clone； 克隆的_div.find'.fieldValue1'.val； 克隆的_div.find'select'.val； 克隆的\u div.insertAfterlast\u div； }; var removeConditions=函数EV{ $ev.closest'.search_criteria1'.remove； } $“按钮”。单击功能{ $'.search_criteria1'.eachfunctionindex{ 索引++； console.log'fieldattribute'+index+'：'+$'.Field_attr1'，this.val； console.log'Condition Value'+index+'：'+$'.Condition_div1'，this.val； console.log'fieldvalue'+index+'：'+$'.fieldValue1'，this.val； console.log'-------------'； } } .m-form__群{ 左侧填充：30px； 右侧填充：30px； } .行{ 显示器：flex； 柔性包装：包装； 右边距：-15px； 左边距：-15px； } = !=

---

获取数据查看委托事件。您需要使用委派事件，因为您正在删除document ready上不存在的元素。查找jQuery。on@LelioFaietaOP正在使用内联事件处理程序。委托与他们的问题无关。我看不出addMoreConditions在您所说的情况下是如何工作的，因为函数声明不在您调用它的范围内。@Archer我明白了，谢谢您指出了好的时机。。。y@ZakariaAcharki我正要评论你的答案：如果我添加了3行3搜索条件，我如何才能一个接一个地获取输入的数据？你需要遍历它们，检查我更新的代码段。非常感谢@Zak，我采用了如下var d=$”.搜索标准1'[I]；var selectedFieldName=$d.find'.field_attr1'.val；这种方法有什么缺点吗？不客气，兄弟，没有缺点，你也可以用你的方法。

 $(document).on("click", ".removeitem", function (e) { 
    //user click on remove 
    e.preventDefault();
    $(this).parent().remove();
});

$(ev).closest('.search_criteria1').remove();