以前点击的项目被模态删除

Question

我有一个允许我删除 .item.

的模式

一旦我点击一个项目，模式就会出现，我可以 select "confirm" 或 "cancel"。如果我 select 取消多个项目，然后取消一个项目 select "confirm"，所有之前点击的项目都将被删除。

我怎样才能避免这种情况？

我试过在模态打开函数中将变量item设置为null，然后直接重置变量，但是没有用。

$(function() {

  var modal = $('.modal');

  $(document).on('click', '.item', function() {
    var item = $(this);
    var text = item.text();
    modal.show();
    modal.find('.modal-header').text('Are you sure you want to remove "' + text + '"?');
    $(document).on('click', '.modal-save', function() {
      item.remove();
      modal.hide();
    });
  });

  $(document).on('click', '.modal-close', function() {
    modal.hide();
  });

});

.modal {
  display: none;
  background: rgba(0, 0, 0, 0.5);
}

.item-container {
  background: #eee;
  width: fit-content;
  padding: 10px;
}

.item {
  width: 100px;
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
  margin: 5px 0;
  cursor: pointer;
}

.item:hover {
  background: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-container">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
  <div class="item">four</div>
</div>
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn modal-close">Cancel</button>
        <button type="button" class="btn modal-save">Confirm</button>
      </div>
    </div>
  </div>
</div>

Answer 1

用空值初始化并在模式关闭时将其设置为空值。

$(function() {

  var modal = $('.modal');
  var item = null;
  $(document).on('click', '.item', function() {
    item = $(this);
    var text = item.text();
    modal.show();
    modal.find('.modal-header').text('Are you sure you want to remove "' + text + '"?');
    $(document).on('click', '.modal-save', function() {
      item.remove();
      modal.hide();
    });
  });

  $(document).on('click', '.modal-close', function() {
    item = null;
    modal.hide();
  });

});

.modal {
  display: none;
  background: rgba(0, 0, 0, 0.5);
}

.item-container {
  background: #eee;
  width: fit-content;
  padding: 10px;
}

.item {
  width: 100px;
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
  margin: 5px 0;
  cursor: pointer;
}

.item:hover {
  background: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-container">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
  <div class="item">four</div>
</div>
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn modal-close">Cancel</button>
        <button type="button" class="btn modal-save">Confirm</button>
      </div>
    </div>
  </div>
</div>

以前点击的项目被模态删除

Previously clicked items being removed by modal

html

javascript

jquery

modal-dialog