I want add and remove dynamically div in my html code using jquery. When I click on my add button, a new text field with remove button to remove this text field will be added. Here is my html code:

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

  })
});
```

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

But when I click on remove button,all the added div is disappeared / page is being reloaded. How I can solve the problem?