ボタンの追加と削除

Question

私は現在、授業のための簡単なWebページを開発しています。ボタンを追加するボタンを作成することは可能ですか？ボタンを削除するためのボタンも追加できますか？

基本的には「追加ボタン」と呼ばれるボタンです。クリックすると、同じサイズのボタンが表示されます（必要な機能はありません）。何回何回クリックしても、もっと多くのボタンが追加されます。ボタン1、ボタン2、ボタン3等である。また、「ボタンの追加」ボタンの隣には、「削除ボタン」と呼ばれるボタンがある。 button3、button2、button1から

Answer 1

どのようにこのようなものでしょうか？インクリメントをわずかに変更してください。

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

Answer 2

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/

Answer 3

番号を付ける必要がありますか？そうでない場合は、ボタンを追加して、増分/減分変数を使用せずに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>