Question 36569 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Add and Remove class to child and parent element – Jquery

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');
});
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search