如何使用JQUERY一次創建刪除按鈕以刪除一個div？

Question

<div class= "button"> 
    <button id="More" type="submit">Add more Parameters</button> 
    <button id="Remove" type="submit">Remove Parameters</button> 
    </div> 

    <script> 
    var count = 2; 
    $('#More').click(function(){ 
    if (count==11) { 
     } 
    else { 
      $("div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br></fieldset></div>"); 
     count++; 
     } 
    }); 

    $('#Remove').click(function(){ 
     .... 
    }); 

有人可以告訴我，如果用戶點擊刪除按鈕，附加的div可以被刪除？此外，如果用戶多次附加，我希望刪除按鈕一次只能刪除一個div。

Answer 1

如果轉換刪除按鈕類的ID，您可以添加刪除按鈕到每個新創建的div：

$(function() { 
 
    var count = 2; 
 
    $('#More').on('click', function(){ 
 
    if (count==11) { 
 

 
    } 
 
    else { 
 
     $(".div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br><button class=\"Remove\" type=\"submit\">Remove Parameters</button></fieldset></div>"); 
 
     count++; 
 
    } 
 
    }); 
 

 
    $('#Last').on('click', function(){ 
 
    $('div.fieldBlock:last').remove(); 
 
    count--; 
 
    }); 
 
    
 
    $(document).on('click', '.Remove', function(e){ 
 
    $(this).closest('div.fieldBlock').remove(); 
 
    count--; 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="div2"> 
 
    <div class= "button"> 
 
     <button id="More" type="submit">Add more Parameters</button> 
 
    </div> 
 
    <div class= "button"> 
 
     <button id="Last" type="submit">Remove last Parameters</button> 
 
    </div> 
 
</div>

Answer 2

此代碼將僅刪除最後附加的div。 我已經創建了帶有id（div2）的div，其中所有的div都將被添加。

var count = 2; 
 
    $('#More').click(function(){ 
 
    if (count==11) { 
 
     } 
 
    else { 
 
      $("#div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br></fieldset></div>"); 
 
     count++; 
 
     } 
 
    }); 
 

 
    $('#Remove').click(function(){ 
 
     $('#div2').find('div').last().remove(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class= "button"> 
 
    <button id="More" type="submit">Add more Parameters</button> 
 
    <button id="Remove" type="submit">Remove Parameters</button> 
 
    </div> 
 
<div id="div2"></div> 
 

 

Answer 3

$(document).ready(function(){ 
$('body').on('click','div',function(){ 
    $('div').removeAttr('current'); //removes attr from all divs 
    $(this).attr('current','true'); // adds attr to div clicked 
})  

$('body').on('click','#remove',function(){ 
    $('current="true"').remove();//removes div with attr current='true' 
    }) 
}); 

我用過.on方法可以在您動態添加事件後委派事件。