jQuery没有成功重置表单

Question

我有一个包含 2 个表单的页面，1 个是常规表单，2 个是隐藏模式中的表单，它显示在第一个表单的成功 ajax 帖子上。

我遇到的问题是，在成功发布后，模态框被正确填充，但如果我关闭并重新打开模态框，我会再次获得以前的值。

图片让事情更清楚：

这是正确的功能：

按下关闭并选择其他地址后：

如您所见，关闭和保存更改按钮消失了，区域选择器消失了，之前请求的地址仍然存在。我尝试清除我所做的更改，但显然我不明白我在做什么。

这是我的脚本：

<script type="text/javascript">

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(".btn-submit").click(function(e){

    e.preventDefault();
    var formData = $('#area_selector').serialize();

    $.ajax({
       type:'POST',
       url:"{{ url('ajaxRequest') }}",
       data: formData,
       success:function(data, response)
       {

          console.log(data.current_area.id);
          let current_area_id = data.current_area.id;
          let current_area_name = data.current_area.name;
          let current_area_div = $(
            '<option value="' + current_area_id +'" selected hidden>' + current_area_id + ' - ' + current_area_name + '</option>'
          );
          let address = data.addresses.address;
          let area = data.current_area.name;
          let form = $(
            '<label for="exampleInputEmail1">Address</label>' +
            '<input type="text" id="title" value ="' + address + '" name="address" class="form-control"><br>'


          );
          //$('#current_area').prepend(current_area_div);
          $('#area_id').prepend(current_area_div);
          $('#ajax-response').prepend(form);
          $("#exampleModal").modal('show');

          $(".btn-close").click(function(e){
            console.log("Close function works")
            $("#exampleModal").modal('hide');
            $('#area_id').html('');
            $('#ajax-response').html('');

          });
          //formData = '';


       }
    });

});

这是模态：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit your address:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

          <form name = "test">
            <div id = "ajax-response">
              <div id = 'all-areas'>
                <label for="name">Area:</label>
                <div id = 'current_area'>
                <select name= "area_id" id = "area_id" class="form-control">

    </div>
    @foreach($areas as $area)
      <option value="{{$area->id}}">{{$area->id}} - {{$area->name}}</option>
    @endforeach
  </select>
</div>
          </form>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-close" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-submit2">Save changes</button>
      </div>
    </div>
  </div>
</div>

我尝试过改变

$('#area_id').html('');
$('#ajax-response').html('');

到

$('#area_id').remove();
$('#ajax-response').remove();

这确实删除了字段，但如果我单击编辑地址，它们不会重新填充。我不确定，但我认为“删除”会完全删除 div 本身，这就是为什么当我单击按钮时它没有重新填充它。

Answer 1

你试过了吗：

$('#area_id').empty();

$('#ajax-response').empty();

但是，如果您清空 #ajax-response，您将从 DOM 中删除 #area_id，因此不需要第一行。

Answer 2

我在要删除的特定行中添加了新标签，并在之后使用了 remove，现在效果很好。