如何使用JQUERY一次创建删除按钮以删除一个div？

-4

<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。如何使用JQUERY一次创建删除按钮以删除一个div？

来源

2016-08-01 jay

不幸的是，SO不是教程网站或代码编写服务。请提出一个关于您尝试**的问题**。 – evolutionxbox

@jay在html规范的每个版本中都不存在html标签'div2'。另一个：我认为你有一个误解使用'.append（）' – reporter

如果转换删除按钮类的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>

来源

2016-08-01 14:18:19 gaetanoM

有没有办法允许用户只删除最后一个盒子，现在在你的代码中，他们可以删除参数2，然后他们删除参数3。有没有办法在删除参数2之前删除参数3？ – jay

如果用户点击参数3，则只会删除该参数，并且在您点击参数2之后，只删除该参数。要只删除最后一个div，你需要使用：last选择器来选择它。 – gaetanoM

@jay代码段已更新。现在我添加了一个新按钮，只删除最后一个参数 – gaetanoM

此代码将仅删除最后附加的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>

来源

2016-08-01 14:08:18

$(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方法可以在您动态添加事件后委派事件。

来源

2016-08-01 15:05:58

如何使用JQUERY一次创建删除按钮以删除一个div？

回答

相关问题