仅当其他类别处于活动状态时才删除具有特定类别的元素

Question

我有一个具有“ edit-mode”类的元素，可以将其删除。类“编辑模式”通过按钮切换。这里的问题是，当删除“ edit-mode”类时，单击该元素可以将其删除，这是不应该发生的。

考虑以下代码：

$(document).ready(function() {
  $('.active-edit-mode').click(function() {
    $('.my-element').toggleClass('edit-mode');
    $('.active-edit-mode').toggleClass('edit-mode');
    $('.my-element.edit-mode').click(function() {
      $(this).remove();
    });
  });
});

.my-element {
  color: #007aff;
  cursor: pointer;
}

.edit-mode {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elements">
  <div class="my-element">
    this element
  </div>
  <div class="my-element">
    this element
  </div>
  <div class="my-element">
    this element
  </div>
</div>
<button class="active-edit-mode">
active edit mode
</button>

Jsfiddle：jsfiddle

Answer 1

您应该在.my-element的onClick事件处理程序中检查此逻辑，这样会更清楚。

$(document).ready(function(){
	$('.active-edit-mode').click(function(){
  	$('.my-element').toggleClass('edit-mode');
    $('.active-edit-mode').toggleClass('edit-mode');
  });
  
  $('.my-element').click(function(){
    if ($(this).hasClass('edit-mode')) {
      console.log('click removing')
      $(this).remove();
    }
  });
});

.my-element { color: #007aff;cursor:pointer; }
.edit-mode {font-weight:bold;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elements">
  <div class="my-element">
  this element
  </div>
    <div class="my-element">
  this element
  </div>
      <div class="my-element">
  this element
  </div>
</div>
<button class="active-edit-mode">
active edit mode
</button>

Answer 2

如果您单独绑定删除功能，它将起作用。您的JS看起来像：

$(document).ready(function(){
    $('.active-edit-mode').click(function(){
    $('.my-element').toggleClass('edit-mode');
    $('.active-edit-mode').toggleClass('edit-mode');
  });
});
$(document).on('click','.my-element.edit-mode',function(){
    $(this).remove();
  });