如何创建一个删除按钮，使用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

此代码将仅删除最后添加的div。 我已经用id（div2）创建了div，其中将附加所有div。

＆＃13;

＆＃13;

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

＆＃13;

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

    

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果将“删除”按钮的ID转换为类，则可以将删除按钮添加到每个新创建的div：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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方法委派事件，因为你动态添加它们。