文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery :在单击div的“删除”按钮后，页面将重新加载。

问Jquery :在单击div的“删除”按钮后，页面将重新加载。
EN

Stack Overflow用户

提问于 2017-03-13 06:57:56

回答 3查看 84关注 0票数 0

我希望使用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>

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

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-03-13 06:59:56

只需将参数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--;
})

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

票数 2

Stack Overflow用户

发布于 2017-03-13 07:06:37

如果我正确理解你的要求，你能试试这个吗？

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

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

票数 2

Stack Overflow用户

发布于 2017-03-13 07:05:51

默认情况下，按钮表现为提交按钮，将其声明为按钮，在代码中添加type=button如下

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42757999

复制

相似问题

问Jquery :在单击div的“删除”按钮后，页面将重新加载。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery :在单击div的“删除”按钮后，页面将重新加载。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery :在单击div的“删除”按钮后，页面将重新加载。
EN