javascript - jQuery : Page is reloading after clicking remove button of that div

Question

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

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

  })
});

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

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

Answer 1

只需将参数e添加到您的点击事件并阻止其默认操作

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