添加和删除按钮答案

【问题标题】：Adding and removing buttons添加和删除按钮
【发布时间】：2018-01-27 13:05:55
【问题描述】：

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

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

【问题讨论】：

请分享您为此所做的研究？

标签： javascript html

【解决方案1】：

必须编号吗？如果没有，您可以附加按钮并使用 jQuery 的 last() 和 remove() 函数，而不需要增量/减量变量。

    <div class="button-test">
        <button type="button" id="add-button">Add Button</button>
        <button type="button" id="remove-button">Remove Last Button</button>
        <div id="new-buttons"></div>
    </div>


    <script>
        $('#add-button').on('click', function () {
            $('#new-buttons').append($('<button>', {
                'type': 'button',
                'class': 'temp',
                'text': 'new button'
            }));
        });

        $('#remove-button').on('click', function () {
            $('#new-buttons button.temp').last().remove();
        });
    </script>

【讨论】：

不完全是，但会将其保留在我的许多运行代码之一中。谢谢！

【解决方案2】：

这样的事情怎么样？稍微改变增量。

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
   button{
     height:100px;
     width: 80px;
     text-align: center;
     margin: 5px 4px;
   }
  #mainButtons button{
    display: inline-block;
    margin: auto;
    }
   </style>


<div id="mainButtons">
 <button onclick="addButton()">Make Button</button>
 <button onclick="removeButton()">Remove Button</button>
</div>
</br>
<div id="que"></div>

<script>
var increment = 0;
function addButton(){
 $("#que").append($("<button id='btn"+(increment++)+"'>This is Button"+ (increment)+"</button>"));
}

function removeButton(){
  $("#btn"+(increment-1)).remove();
  increment--;
}
</script>

【讨论】：

..基本上它在删除后递减。 ;)
不客气。如果您愿意，请将我的回答标记为已接受。此外，可能必须在删除时添加某种 if 语句，这样如果按钮不存在，它就不会删除，否则它将继续递减
是的，当我不断点击删除时，我意识到它变成了否定的，但我仍然会将您的答案标记为非常有用:)

【解决方案3】：

您可以使用 append() jquery 函数。这是一个例子：

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

jQuery :

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

Js 小提琴：https://jsfiddle.net/p8y672oL/

【讨论】：

实际上它的工作方式和我想象的一样。谢谢。
欢迎您:-) .
我添加了大约 5 个按钮并尝试删除它们，显然并非所有按钮都被删除
因为那是例子:-D，你可以想象下一个:-)