Question

我希望使用jquery在我的html代码中添加和删除动态div。当我单击我的添加按钮时，将添加一个带有删除按钮的新文本字段以删除此文本字段。这是我的HTML代码：

＆＃13;

$(document).ready(function() {

  var wrapper = $(".addField"); //Fields wrapper
  var add_button = $("#addButton"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();

    x++;
    $(wrapper).append('<label for="inputEmail3" class="col-sm-1 control-label">' +
      x + '</label>' +
      '<div class="col-md-5">' +
      '<div class="input-group">' +
      '<input type="text" class="form-control" placeholder="Option">' +
      '<span class="input-group-btn">' +
      '&nbsp;&nbsp;' +
      '<button href="#" class="removeOption">' +
      '<i class="fa fa-times fa-2x text-danger" style="font-size: 18px" aria-hidden="true"></i>' +
      '</button>' +
      '</span>' +
      '</div>' +
      '</div>');

  });

  $(wrapper).on("click", ".removeOption", function() { //user click on remove text

    $(this).parent('div').remove();
    x--;

  })
});

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Jquery library for bootstrap-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Options</label>
  <div class="col-md-10">
    <button class="btn btn-danger" id="addButton">ADD OPTION</button>
  </div>
</div>

<div class="form-group">
  <div class="addField">
    <label for="inputEmail3" class="col-sm-1 control-label">1</label>
    <div class="col-md-5">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Option">
        <span class="input-group-btn">
            <button href="#" class="removeOption">
              <i class="fa fa-times fa-2x text-danger" style="font-size: 18px" aria-hidden="true"></i>
            </button>
        </span>
      </div>
    </div>
  </div>
</div>

＆＃13;

但是当我点击删除按钮时，所有添加的div都会消失/正在重新加载页面。我怎么解决这个问题？

Answer 1

只需将参数e添加到click event并阻止其默认操作

$(wrapper).on("click",".removeOption", function(e){ //user click on remove text
      e.preventDefault(); //or try with return false
      $(this).parent('div').remove(); 
      x--;
})

注意 - button没有属性href。相反，a代码有一个。

<强>段

$(document).ready(function() {

  var wrapper = $(".addField"); //Fields wrapper
  var add_button = $("#addButton"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();

    x++;
    $(wrapper).append('<label for="inputEmail3" class="col-sm-1 control-label">' +
      x + '</label>' +
      '<div class="col-md-5">' +
      '<div class="input-group">' +
      '<input type="text" class="form-control" placeholder="Option">' +
      '<span class="input-group-btn">' +
      '&nbsp;&nbsp;' +
      '<button href="#" class="removeOption">' +
      '<i class="fa fa-times fa-2x text-danger" style="font-size: 18px" aria-hidden="true"></i>' +
      '</button>' +
      '</span>' +
      '</div>' +
      '</div>');

  });

  $(wrapper).on("click", ".removeOption", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('div.col-md-5').prev().remove();
    $(this).closest('div.col-md-5').remove();
    x--;

  })
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Options</label>
  <div class="col-md-10">
    <button class="btn btn-danger" id="addButton">ADD OPTION</button>
  </div>
</div>

<div class="form-group">
  <div class="addField">
    <label for="inputEmail3" class="col-sm-1 control-label">1</label>
    <div class="col-md-5">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Option">
        <span class="input-group-btn">
             <button href="#" class="removeOption">
              <i class="fa fa-times fa-2x text-danger" style="font-size: 18px" aria-hidden="true"></i>
             </button>
        </span>
      </div>
    </div>
  </div>
</div>

Answer 2

如果我理解你的要求，请试试这个

＆＃13;

$(document).ready(function() {

  var wrapper = $(".addField"); //Fields wrapper
  var add_button = $("#addButton"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();

    x++;
    $(wrapper).append('<div class="wrapper"><label for="inputEmail3" class="col-sm-1 control-label">' +
      x + '</label>' +
      '<div class="col-md-5">' +
      '<div class="input-group">' +
      '<input type="text" class="form-control" placeholder="Option">' +
      '<span class="input-group-btn">' +
      '&nbsp;&nbsp;' +
      '<button  class="removeOption btn btn-danger">' +
      '<i class="fa fa-times fa-2x text-danger" style="font-size: 18px" aria-hidden="true"></i>' +
      '</button>' +
      '</span>' +
      '</div>' +
      '</div><div>');

  });

  $(wrapper).on("click", ".removeOption", function(e) {
    e.preventDefault();
    $(this).parents('div.wrapper').remove();
  })
});

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Jquery library for bootstrap-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Options</label>
  <div class="col-md-10">
    <button class="btn btn-danger" id="addButton">ADD OPTION</button>
  </div>
</div>

<div class="form-group">
  <div class="addField">
    <div class="wrapper">
      <label for="inputEmail3" class="col-sm-1 control-label">1</label>
      <div class="col-md-5">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Option">
          <span class="input-group-btn">
            <button  class="removeOption btn btn-danger"><i class="fa fa-times fa-2x text-danger" style="font-size: 18px" aria-hidden="true"></i></button></span>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

默认情况下，按钮的行为与提交按钮相同，在代码中将其声明为按钮添加type=button，如

<button class="btn btn-danger" id="addButton" type=button>ADD OPTION</button>

Jquery：单击该div的删除按钮后重新加载页面

3 个答案: