Jquery：そのdivの削除ボタンをクリックした後にページがリロードされています

jqueryを使用して動的にdivを追加して削除します。追加ボタンをクリックすると、このテキストフィールドを削除するための削除ボタン付きの新しいテキストフィールドが追加されます。ここに私のhtmlコードです：Jquery：そのdivの削除ボタンをクリックした後にページがリロードされています

$(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は/ページがリロードされている姿を消しています。どのように問題を解決することができますか？

出典

2017-03-13 OUN Ash

チェックこれは、[https://jsfiddle.net/bbwy7c4t/](https://jsfiddle.net/bbwy7c4t/）少し異なるコードを整理する必要があります。 – Goku

だけ注意あなたclick eventにパラメータ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タグにタグが1つあります。

スニペット

$(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">' + '  ' + '<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/[email protected]/dist/js/tether.min.js"></script> <script src="https://npmcdn.com/[email protected]/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>

出典

2017-03-13 06:59:56

が機能しません。私はに編集しました。また、これを追加しましたが、動作しません。： –

'e.stopImmediatePropagation（）'で試してみましょう。デモ用のスニペットを追加しました.. –

これは動作します!!!ありがとう：D –

デフォルトボタンは、私は理解していれば

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

出典

2017-03-13 07:05:51 aje

のようなあなたのコード内でtype=buttonを追加ボタンとしてそれを宣言し、として送信ボタンを振る舞いますあなたの要件は正しくplsこれを試すことができます

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

出典

2017-03-13 07:06:37

Jquery：そのdivの削除ボタンをクリックした後にページがリロードされています

答えて

関連する問題