Add and Remove class to child and parent element

Sajawal Sheraz 0
Viewed 37

when i click on 'customer-row' it should add class 'open-carrier-tiers' in 'carrier-tiers'. which is working. but when i click on 'carrier-tiers-close-btn' then it should remove the same class that added before from its parent parent element. which is not working. and i am using $(this) because this whole code repeating multiple time on page.

<tr class="customer-row">
  <td class="carrier-tiers">
    <div class="content-box">
      <li class="carrier-tiers-close-btn">close</li>
      <form action="" method="POST">
        <input type="text" name="Customer Name">
        <button type="submit">Submit</button>
      </form>
    </div>
   </td>
 </tr>

Jquery

 $(".customer-row").click(function () {
    $(this).find("td.carrier-tiers").addClass('open-carrier-tiers');
});

$(".carrier-tiers-close-btn").click(function () {
    $(this).parent().parent().removeClass('open-carrier-tiers');
});
onclicklistener jquery javascript
2 Answers

I think it's because the close event is being fired whenever the row is clicked because the event bubbles up. To fix this add an event.stopPropation() to the event handler. This will prevent the row click from also firing close. Try the code snippet below to see if it works for you.

$(".customer-row").click(function(e) {
  $(this).find("td.carrier-tiers").addClass('open-carrier-tiers')
  e.stopPropagation();

  console.log(document.querySelector("td.carrier-tiers").className);

});

$(".carrier-tiers-close-btn").click(function(e) {
  $(this).parent().parent().removeClass('open-carrier-tiers');
  e.stopPropagation();

  console.log(document.querySelector(".carrier-tiers-close-btn").className);

});
td {
  padding: 0.5em;
  border: 1px solid lightgray;
}
<table>
  <tbody>
    <tr class="customer-row">
      <td>customer-row</td>
      <td class="carrier-tiers">
        <div class="content-box">
          <li class="carrier-tiers-close-btn">close</li>
          <form action="" method="POST">
            <input type="text" name="Customer Name">
            <button type="submit">Submit</button>
          </form>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

userjsX30

Consider using more precise selectors.

$(function() {
  $(".customer-row td:eq(0)").click(function() {
    $(this).next("td.carrier-tiers").addClass('open-carrier-tiers');
  });
  $(".carrier-tiers-close-btn").click(function() {
    $(this).closest('.open-carrier-tiers').removeClass('open-carrier-tiers');
  });
});
.open-carrier-tiers {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="customer-row">
      <td>customer-row</td>
      <td class="carrier-tiers">
        <div class="content-box">
          <ul>
            <li class="carrier-tiers-close-btn">close</li>
          </ul>
          <form action="" method="POST">
            <input type="text" name="Customer Name">
            <button type="submit">Submit</button>
          </form>
        </div>
      </td>
    </tr>
  </tbody>
</table>

As you targeted the Row, the click event on the child could not bubble up.

Twisty0
Related