remove element with specific class only when other class is active

Question

I have an element that can be removed when it has the class "edit-mode". The class "edit-mode" is toggled by a button. The problem here is that when the "edit-mode" class gets removed, this element can be removed on click which shouldn't happen.

Consider the following code :

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

When you call `$('.my-element.edit-mode')` it runs against any matching elements *at that time* - as you later remove `.edit-mode`, the event is already assigned so remains. You need to use event delegation: $(document).on("click", ".my-element.edit-mode", function() { ...` — freedomn-m, May 26 '19 at 15:04
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, May 26 '19 at 15:04
You're also assigning a click event handler *inside* another click event handler, so gets assigned multiple times. This is easier to see with tidied-code. Move the remove click handler into the doc ready and use event delegation as above. — freedomn-m, May 26 '19 at 15:06

score 0 · Answer 1 · answered May 26 '19 at 15:05

You should check this logic in the onClick event handler of .my-element, this would be more clearer.

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

score -1 · Accepted Answer · answered May 26 '19 at 15:06

It will work if you bind the removal function independently. Your JS would look like:

$(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();
  });

remove element with specific class only when other class is active

2 Answers2