如何动态删除整个div

Question

我在div中有2个按钮：

1. 加号按钮
2. 减号按钮

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

$(document).ready(function() {

  var addMoreConditions = function(evt) {
    var $div = document.getElementById('query_area');
    var queryDiv = document.getElementsByClassName('search_criteria1');
    // $div.appendChild($div);
    $(".search_criteria1:last").clone().insertAfter("div.search_criteria1:last");
  };
});

var removeConditions = function(ev) {
  $('#query_area').remove($(ev).parent()[0]);
}

.m-form__group {
  padding-left: 30px;
  padding-right: 30px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group m-form__group row">
  <div class="search_criteria1 form-group m-form__group row">
    <div class="col-4">
      <select class="field_attr1 form-control m-input"></select>
    </div>
    <div class="col-3">
      <select class="condition_div1 form-control m-input">
        <option value="eq">=</option>
        <option value="neq">!=</option>
      </select>
    </div>
    <div class="col-3">
      <input type="text" class="fieldValue1 form-control m-input" />

    </div>
    <div class="col-1" onclick="addMoreConditions()">
      <input class="btn btn-primary" type="button" name="btn3" value="+">

    </div>
    <div class="col-1" style="padding-left:20px" onclick="removeConditions(this)">
      <input class="btn btn-primary" type="button" name="btn3" value="-">
    </div>
  </div>
</div>

Answer 1

<div class="col-1 removeitem" style="padding-left:20px">

给某个特定的类或id id使用一个类

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

Answer 2

首先，在使用内联事件时，您需要删除$(document).ready。内联处理程序期望函数在global范围内。在您的示例中，则位于$(document).ready

的本地范围内

在删除的同时，您可以使用.closest()选择要删除的各个元素。

var addMoreConditions = function(evt) {
  var $div = document.getElementById('query_area');
  var queryDiv = document.getElementsByClassName('search_criteria1');
  // $div.appendChild($div);
  $(".search_criteria1:last").clone().insertAfter("div.search_criteria1:last");
};
var removeConditions = function(ev) {
  $(ev).closest('.search_criteria1').remove();
}

.m-form__group {
  padding-left: 30px;
  padding-right: 30px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group m-form__group row">
  <div class="search_criteria1 form-group m-form__group row">
    <div class="col-4">
      <select class="field_attr1 form-control m-input"></select>
    </div>
    <div class="col-3">
      <select class="condition_div1 form-control m-input">
        <option value="eq">=</option>
        <option value="neq">!=</option>
      </select>
    </div>
    <div class="col-3">
      <input type="text" class="fieldValue1 form-control m-input" />

    </div>
    <div class="col-1" onclick="addMoreConditions()">
      <input class="btn btn-primary" type="button" name="btn3" value="+">

    </div>
    <div class="col-1" style="padding-left:20px" onclick="removeConditions(this)">
      <input class="btn btn-primary" type="button" name="btn3" value="-">
    </div>
  </div>
</div>

Answer 3

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

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

注意1：：当您clone div时，它将与用户输入一起克隆，这意味着如果用户在最后一个输入中键入了100，则您单击了加号按钮，新克隆的div中的输入值也将为100。如果要为新实例初始化input/select，则可以使用克隆的div cloned_div作为变量，并首先对其进行初始化，然后将其推入视图。

注意2：。您不需要在代码中使用queryDiv和$div变量，只需删除它们即可。

var addMoreConditions = function(evt) {
  var last_div = "div.search_criteria1:last";
  var cloned_div = $(last_div).clone();

  cloned_div.find('.fieldValue1').val("");
  cloned_div.find('select').val("");

  cloned_div.insertAfter(last_div);
};

var removeConditions = function(ev) {
  $(ev).closest('.search_criteria1').remove();
}

$('button').click(function() {
  $('.search_criteria1').each(function(index) {
    index++;

    console.log('Field Attribute ' + index + ' : ' + $('.field_attr1', this).val());
    console.log('Condition Value ' + index + ' : ' + $('.condition_div1', this).val());
    console.log('Field Value ' + index + ' : ' + $('.fieldValue1', this).val());
    console.log('--------------------------------------');
  })
})

.m-form__group {
  padding-left: 30px;
  padding-right: 30px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group m-form__group row">
  <div class="search_criteria1 form-group m-form__group row">
    <div class="col-4">
      <select class="field_attr1 form-control m-input"></select>
    </div>
    <div class="col-3">
      <select class="condition_div1 form-control m-input">
        <option value="eq">=</option>
        <option value="neq">!=</option>
      </select>
    </div>
    <div class="col-3">
      <input type="text" class="fieldValue1 form-control m-input" />

    </div>
    <div class="col-1" onclick="addMoreConditions(this)">
      <input class="btn btn-primary" type="button" name="btn3" value="+">

    </div>
    <div class="col-1" style="padding-left:20px" onclick="removeConditions(this)">
      <input class="btn btn-primary" type="button" name="btn3" value="-">
    </div>
  </div>
</div>
<button type="button">GET DATA</button>