Javascript 添加和删除按钮

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

基本上是一个名为“添加按钮”的按钮，如果你点击它，一个大小相同的按钮（可以命名为任何合适的按钮，不需要任何功能）。无论我点击它多少次，都会添加更多的按钮，例如button1、button2、button3等。此外，“添加按钮”按钮旁边是一个名为“删除按钮”的按钮，它会从按钮3、button2、然后button1中删除按钮。您可以使用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();
  });;
});

var start=0；
$（文档）。在（“单击”、“#添加_按钮”上，函数（）{
启动++；
$（“.result”）.append（$（'Add'+start+''）.addClass（'button'+start））；
});
$（文档）。在（“单击”、“#删除_按钮”上，函数（）{
开始--；
$（“.result”）.find（“#添加按钮”）.each（函数（索引，el）{
$（'.button'+start）.remove（）；
});;
});

Js fiddle:

您可以使用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();
  });;
});

var start=0；
$（文档）。在（“单击”、“#添加_按钮”上，函数（）{
启动++；
$（“.result”）.append（$（'Add'+start+''）.addClass（'button'+start））；
});
$（文档）。在（“单击”、“#删除_按钮”上，函数（）{
开始--；
$（“.result”）.find（“#添加按钮”）.each（函数（索引，el）{
$（'.button'+start）.remove（）；
});;
});

---

Js fiddle:

像这样的东西怎么样？稍微更改增量

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

钮扣{
高度：100px；
宽度：80px；
文本对齐：居中；
保证金：5px4px；
}
#主按钮{
显示：内联块；
保证金：自动；
}
制作按钮
移除按钮


var增量=0；
函数addButton（）{
$（“#que”）.append（$（$（这是按钮“+（增量）+”）；
}
函数removeButton（）{
$（“#btn”+（增量-1））.remove（）；
增量--；
}

像这样的东西怎么样？稍微更改增量

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

钮扣{
高度：100px；
宽度：80px；
文本对齐：居中；
保证金：5px4px；
}
#主按钮{
显示：内联块；
保证金：自动；
}
制作按钮
移除按钮


var增量=0；
函数addButton（）{
$（“#que”）.append（$（$（这是按钮“+（增量）+”）；
}
函数removeButton（）{
$（“#btn”+（增量-1））.remove（）；
增量--；
}

它们必须编号吗？如果没有，您可以附加按钮并使用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>

添加按钮
删除最后一个按钮
$（“#添加按钮”）。在（'click'，函数（）{
$（'#新按钮'）。附加（$（''）{
“类型”：“按钮”，
'class'：'temp'，
“文本”：“新建按钮”
}));
});
$（“#删除按钮”）。在（'click'，函数（）{
$（'#new buttons button.temp'）.last（）.remove（）；
});

它们必须编号吗？如果没有，您可以附加按钮并使用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>

添加按钮
删除最后一个按钮
$（“#添加按钮”）。在（'click'，函数（）{
$（'#新按钮'）。附加（$（''）{
“类型”：“按钮”，
'class'：'temp'，
“文本”：“新建按钮”
}));
});
$（“#删除按钮”）。在（'click'，函数（）{
$（'#new buttons button.temp'）.last（）.remove（）；
});

请分享您为此所做的研究？请分享您为此所做的研究？事实上，这是我想象中的效果。谢谢。您的惠康：-）。我添加了大约5个按钮并试图移除它们，显然并不是所有的按钮都被移除，因为这是示例：-D，您可以想象下一个：-）实际上它的工作原理与我想象的一样。谢谢。您的wellcome:-）。我添加了大约5个按钮并试图移除它们，显然并不是所有按钮都被移除，因为这是示例：-D，您可以想象下一个：-）…基本上移除后它会减少。；）不客气。如果您愿意，请将我的答案标记为已接受。此外，可能必须在删除按钮上添加某种if语句，以便在按钮不存在时它不会删除，否则它将继续递减。当我不断单击“删除”时，我意识到它变为负值，但尽管如此，我仍然会将您的答案标记为非常有用：）…基本上，它在删除后会递减。；）不客气。如果您愿意，请将我的答案标记为已接受。此外，可能需要在删除按钮上添加某种if语句，这样如果按钮不存在，它就不会删除，否则它将不断减少。我意识到，当我不断单击“删除”时，它会变为负值，但尽管如此，我仍然会将您的答案标记为非常有用：）不完全正确，但会将其保留在我的许多运行代码中。谢谢不完全是这样，但我会把它保存在我的许多运行代码中。谢谢