通过jQuery在div中追加数据[不工作]

Question

我想在 div 中附加选择框和文本框，但我的代码不起作用。我尝试了我的结局并学习了其他线程代码，但同样我无法实现目标。 在这里，我展示了我在其中附加数据的单个主 div，但在我的真实案例中，我有动态的 <div class="note" id="23203"> 这就是为什么我提到 div id 这是独一无二的。

当我单击+ 按钮时，我想在appendApp_body 中附加文本框并选择框，如果我单击选择- div 按钮，则同样删除div

请帮助我如何使它正确。

当我点击按钮时我想要

var xMachine = 1;

$('.add_MoreMachine__button').click(function() {
  var qty = $(this).attr("data-qty");
  var maxMachineField = qty;
  if (xMachine < maxMachineField) {
    newrowMachine = '<div class="appendApp_body"><select class="custom-select font-size-sm shadow-none" name="product_name[]"><option>--</option><option>6 AMP (RF)</option></select ><input type="text" class="form-control" maxlength="50" name="productnumber[]" /></div><button type="button" class = "btn btn-danger btn-circle float-right remove_Machinebutton" ><i class="fa fa-minus"></i></button ></div>';
    $('.appendApp_body:last').after(newrowMachine);
  } else {
    alert("Ops...! You have total " + maxMachineField + " allowed fields to fill and now you don't have extra permission to proceed this action. [error: limit-reached]");
    return false;
  }
});


$(".complaint_MachineFor4").on("click", ".remove_Machinebutton", function(e) {
                    e.preventDefault();
                    $(this).closest('<div>').remove();
                    xMachine--;
                });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="note" id="23203">
  <div class="note-body">
    <div class="note-added-on">
      <select style="margin-bottom: 5px;" class="custom-select font-size-sm shadow-none" name="product_id[]">
        <option value="Issue1">Issue1</option>
      </select>
      <div class="appendApp_body">
        <select class="custom-select font-size-sm shadow-none" name="product_name[]">
          <option selected="" value="0">--</option>
          <option>6 AMP (RF)</option>
        </select>
        <input type="text" class="form-control" maxlength="50" name="productnumber[]" />
      </div>

      <button style="width: 100%; margin-top: 10px;" type="button" class="btn btn-success add_MoreMachine__button" data-qty="2"><i class="fa fa-plus"></i></button>
    </div>
  </div>
</div>

Answer 1

如果有多个notes div，您可以使用 $(this).closest(".note-added-on").. 仅在单击按钮的位置附加生成的 div。然后，要删除相同的内容，您可以使用 $(this).prev('.appendApp_body').remove() 删除 appendApp_body div 和 $(this).remove() 删除按钮。

演示代码：

$('.add_MoreMachine__button').click(function() {
  var xMachine = $(this).closest('.note-added-on').find('.appendApp_body').length; //get length of cloned div
  var maxMachineField = $(this).attr("data-qty");
  //compare
  if (xMachine < maxMachineField) {
    //just add one extra class..`cloned..`
    newrowMachine = '<div class="appendApp_body cloned"><select class="custom-select font-size-sm shadow-none" name="product_name[]"><option>--</option><option>6 AMP (RF)</option></select ><input type="text" class="form-control" maxlength="50" name="productnumber[]" /></div><button type="button" class = "btn btn-danger btn-circle float-right remove_Machinebutton" ><i class="fa fa-minus"></i></button></div>';
    //append inside `note-added-on` div 
    $(this).closest(".note-added-on").append(newrowMachine);
  } else {
    alert("Ops...! You have total " + maxMachineField + " allowed fields to fill and now you don't have extra permission to proceed this action. [error: limit-reached]");
    return false;
  }
});


$(document).on("click", ".remove_Machinebutton", function(e) {
  e.preventDefault();
  $(this).prev('.appendApp_body').remove(); //get prev div
  $(this).remove(); //remove button as well
});

.note {
  border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="note" id="23203">
  <div class="note-body">
    <div class="note-added-on">
      <select style="margin-bottom: 5px;" class="custom-select font-size-sm shadow-none" name="product_id[]">
        <option value="Issue1">Issue1</option>
      </select>
      <div class="appendApp_body">
        <select class="custom-select font-size-sm shadow-none" name="product_name[]">
          <option selected="" value="0">--</option>
          <option>6 AMP (RF)</option>
        </select>
        <input type="text" class="form-control" maxlength="50" name="productnumber[]" />
      </div>

      <button style="margin-top: 10px;" type="button" class="btn btn-success add_MoreMachine__button" data-qty="2"><i class="fa fa-plus"></i></button>
    </div>
  </div>
</div>
<div class="note" id="232031">
  <div class="note-body">
    <div class="note-added-on">
      <select style="margin-bottom: 5px;" class="custom-select font-size-sm shadow-none" name="product_id[]">
        <option value="Issue1">Issue1</option>
      </select>
      <div class="appendApp_body">
        <select class="custom-select font-size-sm shadow-none" name="product_name[]">
          <option selected="" value="0">--</option>
          <option>6 AMP (RF)</option>
        </select>
        <input type="text" class="form-control" maxlength="50" name="productnumber[]" />
      </div>

      <button style="margin-top: 10px;" type="button" class="btn btn-success add_MoreMachine__button" data-qty="1"><i class="fa fa-plus"></i></button>
    </div>
  </div>
</div>