一旦创建就删除克隆元素的问题

Question

我有克隆/添加div元素的代码，当单击按钮时它是子元素，但是，当单击删除按钮时，它似乎不会删除最近的div到删除按钮。你能帮忙吗？

$(function() {
  //on click
  $(".btn-primary").on("click", function() {
    //alert($(".input-group").length)
    var
      //get length of selections
      length = $(".input-group").length,
      //create new id
      newId = "selection-" + length,
      //clone first element with new id
      clone = $("#selection").clone().attr("id", newId);
    clone.children('.show-tick').attr('id', 'select-' + length++);
    //append clone on the end
    $("#selections").append(clone);
  });

  $(".btn-secondary").on("click", function() {
    $(this).closest('.input-group').remove();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="selections">
  <div class="input-group" id="selection">
    <span class="input-group-addon">
        <i class="icon wb-menu" aria-hidden="true"></i>
        </span>
    <select class="show-tick" data-plugin="select2" id="select">
      <option>True</option>
      <option>False</option>
    </select>
  </div>
</div>

<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

Answer 1

要删除上一个选择项目，您应该使用：

$("#selections").find('select').last().remove();

在你的功能中：

$(".btn-secondary").on("click", function() {
    $("#selections").find('select').last().remove();
});

Answer 2

你想要最后一个.input-group所以用这个替换最后一行：

  $('.input-group').last().remove();

这些按钮实际上是#selections的兄弟，因此参考点（this）不需要来自按钮本身。 .closest()会定位按钮的祖先元素，而.input-group更像是＆＃34; nephew / niece＆＃34;与按钮的关系。使用父容器#selections或.input-group的集合就足够了。

修改

添加了一个条件，$('.input-group').length应为1，不会被删除，否则，无法克隆。

演示

＆＃13;

＆＃13;

$(function() {
  //on click
  $(".btn-primary").on("click", function() {
    //alert($(".input-group").length)
    var
      //get length of selections
      length = $(".input-group").length,
      //create new id
      newId = "selection-" + length,
      //clone first element with new id
      clone = $("#selection").clone(true, true).attr("id", newId);
      clone.find('.show-tick').attr('id', 'select-' + length++);
    //append clone on the end
    $("#selections").append(clone);
  });

  $(".btn-secondary").on("click", function() {
    if ($(".input-group").length > 1) {
      $('.input-group').last().remove();
    } else {
      return false;
    }
  });

});

＆＃13;

<div id="selections">
  <div class="input-group" id="selection">
    <span class="input-group-addon">
    <i class="icon wb-menu" aria-hidden="true"></i>
    </span>
    <select class="show-tick" data-plugin="select2" id="select">
      <option>True</option>
      <option>False</option>
    </select>
  </div>
</div>
<button class="btn btn-primary" type="button" style="margin-left: 
    30px;">
    Add new selection
    </button>
<button class="btn btn-secondary" type="button" style="margin-left: 
    30px;">
    Remove new selection
    </button>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

或只做

＆＃13;

＆＃13;

$('#selections div:last').remove();

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用:last-child选择器：

$('.input-group:last-child').remove();

Answer 5

您可以通过各种方式在点击处理程序中执行此操作：

$("#selections .input-group:last-child").remove();
// Or
$(".input-group:last-child", "#selections").remove();
// Or
$(".input-group", "#selections").last().remove();

使用第一种方式：

＆＃13;

＆＃13;

$(function() {
  //on click
  $(".btn-primary").on("click", function() {
    //alert($(".input-group").length)
    var
      //get length of selections
      length = $(".input-group").length,
      //create new id
      newId = "selection-" + length,
      //clone first element with new id
      clone = $("#selection").clone().attr("id", newId);
    clone.children('.show-tick').attr('id', 'select-' + length++);
    //append clone on the end
    $("#selections").append(clone);
  });

  $(".btn-secondary").on("click", function() {
    $("#selections .input-group:last-child").remove();
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="selections">
  <div class="input-group" id="selection">
    <span class="input-group-addon">
        <i class="icon wb-menu" aria-hidden="true"></i>
        </span>
    <select class="show-tick" data-plugin="select2" id="select">
      <option>True</option>
      <option>False</option>
    </select>
  </div>
</div>

<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

＆＃13;

＆＃13;

＆＃13;

您还应该添加一项检查，其中至少有一个.input-group元素可供添加按钮使用，因为如果没有.input-group元素，您将克隆哪个元素？所以，添加一个像：

这样的支票

＆＃13;

＆＃13;

$(function() {
  //on click
  $(".btn-primary").on("click", function() {
    //alert($(".input-group").length)
    var
      //get length of selections
      length = $(".input-group").length,
      //create new id
      newId = "selection-" + length,
      //clone first element with new id
      clone = $("#selection").clone().attr("id", newId);
    clone.children('.show-tick').attr('id', 'select-' + length++);
    //append clone on the end
    $("#selections").append(clone);
  });

  $(".btn-secondary").on("click", function() {
    var length = $(".input-group").length;
    if (length === 1) {
        alert("Can not delete the last element");
        return;
    }
    
    $("#selections .input-group:last-child").remove();
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="selections">
  <div class="input-group" id="selection">
    <span class="input-group-addon">
        <i class="icon wb-menu" aria-hidden="true"></i>
        </span>
    <select class="show-tick" data-plugin="select2" id="select">
      <option>True</option>
      <option>False</option>
    </select>
  </div>
</div>

<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>

＆＃13;

＆＃13;

＆＃13;

Answer 6

使用最后一种方法$("#selections").children("div").last().remove();

$(function() {
  //on click
  $(".btn-primary").on("click", function() {
    //alert($(".input-group").length)
    var
      //get length of selections
      length = $(".input-group").length,
      //create new id
      newId = "selection-" + length,
      //clone first element with new id
      clone = $("#selection").clone().attr("id", newId);
    clone.children('.show-tick').attr('id', 'select-' + length++);
    //append clone on the end
    $("#selections").append(clone);
  });

  $(".btn-secondary").on("click", function() {
    $("#selections").children("div").last().remove();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="selections">
  <div class="input-group" id="selection">
    <span class="input-group-addon">
        <i class="icon wb-menu" aria-hidden="true"></i>
        </span>
    <select class="show-tick" data-plugin="select2" id="select">
      <option>True</option>
      <option>False</option>
    </select>
  </div>
</div>

<button class="btn btn-primary" type="button" style="margin-left:30px;">Add new selection</button>
<button class="btn btn-secondary" type="button" style="margin-left:30px;">Remove new selection</button>