javascript - 按升序添加按钮和按降序删除按钮

Question

我目前正在为一项学校作业开发一个简单的网页，我想知道是否可以创建一个按钮来添加一个按钮，同时在它旁边添加一个按钮以删除该按钮？

基本上是一个名为“添加按钮”的按钮，如果您单击它，则会出现一个具有相同大小的按钮(可以命名为任何合适的名称，不需要任何功能)。无论我点击多少次，都会添加更多按钮，例如button1, button2, button3 等。此外，在“添加按钮”按钮旁边是一个名为“删除按钮”的按钮，它会按降序删除按钮，例如从 button3、button2，然后是 button1。

不知何故，并不是所有的按钮都被移除了。我该如何解决这个问题？

HTML:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button type="button" class="btn" id="add_button">add</button>
<button type="button" class="btn" id="delete_button">delete</button>
    <div class="result">

    </div>

JS:

var start = 0;
        $(document).on("click","#add_button",function(){
            start++;
  $(".result").append($('<button id="add_button">Add'+start+'</button>').addClass('button'+start));
});
        $(document).on("click","#delete_button",function(){
            start--;
  $(".result").find('#add_button').each(function(index, el) {
    $('.button'+start).remove();
  });;
});

fiddle :

https://jsfiddle.net/p8y672oL

Answer 1

你不需要添加动态类，只需将 id 切换到 class 用于 add_button 并使用 .eq( start) 选择 start 处的 button.add_button 索引:

var start = 0;
$(document).on("click", ".add_button", function(){
  start++;
  $(".result").append($(this).clone().text('Add'+start));
});

$(document).on("click","#delete_button",function(){
  if ($('.add_button').length > 1) {
    $('.add_button').eq(start--).remove()
  }
});

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button type="button" class="btn add_button">add</button>
<button type="button" class="btn" id="delete_button">delete</button>
<div class="result"></div>