Question

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

基本上是一个名为“添加按钮”的按钮，如果单击它，则会出现一个大小相同的按钮（可以命名为任何适当的，不需要任何功能）。无论我点击多少次，都会添加更多按钮，例如按钮1，按钮2，按钮3等。另外，“添加按钮”按钮旁边是一个名为“删除按钮”的按钮，在该按钮中按下按钮，例如从button3，button2，然后按钮1。

不知道所有按钮都被移除了。我该如何解决这个问题？

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();
  });;
});

小提琴：

https://jsfiddle.net/p8y672oL

Answer 1

您不需要添加动态类，只需从id切换到class，然后使用add_button选择button.add_button { {1}}索引：

＆＃13;

.eq(start)

＆＃13;

start

＆＃13;

Answer 2

您不需要启动变量。元素的数量告诉您下一个数字是什么。您也不需要删除大小检查。对具有零大小结果堆栈的jQuery对象执行操作将被忽略。

$(document).on("click", "#add_button", function() {
  var index = $('.add_button').length + 1;
  
  $(".result").append($('<button class="add_button">Add' + index + '</button>').addClass('button' + index));
});
$(document).on("click", "#delete_button", function() {
  $(".result").find('.add_button').last().remove();
});

<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>

按升级顺序添加按钮并按降序删除按钮

2 个答案: