Remove parent div class if child div has a specific value

javascript get parent element from child
jquery remove element
jquery remove parent element
remove parent element javascript
jquery parent of parent
jquery parent > child selector
jquery children
jquery get parent id

I have the following code:

<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
   <button type="button" class="CalendarDay__button">16</button>
</td>

Check button value if it is 16 then remove the .CalendarDay--valid from the parent div.

How do I do this?

Use parent with this for particular td. I give two td 16 -- 17 on example.17 is shown but 16 remove.

$('.CalendarDay').find('.CalendarDay__button').each(function() {
  if ($(this).text() == '16')
    $(this).parent('td').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">

      <button type="button" class="CalendarDay__button">16</button>
    </td>
    <td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">

      <button type="button" class="CalendarDay__button">17</button>
    </td>
  </tr>
</table>

How to remove a parent div in JavaScript if all the ids and classes , Quora User, have some good understanding on it it will get current node value and using that remove that element parent div element on the page and traverse the DOM tree to that particular element and remove it in a similar fashion​. If you're going to remove a div, why give it the same ID and class as all its children? The removeChild() method removes a specified child node of the specified element. Returns the removed node as a Node object, or null if the node does not exist. Note: The removed child node is no longer part of the DOM.

You can use closest() method to do that:

var elem = $('.CalendarDay__button');
if (elem.text().trim() === '16') {
  elem.closest('.CalendarDay--valid').removeClass('CalendarDay--valid');
}
.CalendarDay--valid button{
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">

      <button type="button" class="CalendarDay__button">16</button>
    </td>
  </tr>
</table>

jQuery children() Method, How to use the filter parameter to return all <li> elements with the class name "​first", How to select all <p> elements that are direct children of their parent <div​>  Remove all the child elements of a DOM node in JavaScript Child nodes can be removed from a parent with removeChild() , and a node itself can be removed with remove() . Another method to remove all child of a node is to set it’s innerHTML=”” property, it is an empty string which produces the same output.

Try this if you have multiple buttons to check:

$.each($('.CalendarDay__button'),function(){
    var btn = $(this);
    var parent = btn.closest('.CalendarDay');
    // Before
    console.log(parent.attr('class'))
    if(btn.text() == "16"){
        parent.removeClass('CalendarDay--valid');
        // After
        console.log(parent.attr('class'))
    }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">

      <button type="button" class="CalendarDay__button">16</button>
    </td>
  </tr>
</table>

jQuery parent() Method, The parent() method returns the direct parent element of the selected element. (to return children or other descendants), use the children() or find() method. How to use the filter parameter to return the parent <li> element with class name While using this site, you agree to have read and accepted our terms of use,  He wants the parent with some class, not just the parent. – user663031 Oct 5 '16 at 12:59 @torazaburo This is Question from OP "JavaScript: How to get parent element by selector?" it does not mention Class – ameya rote Oct 18 '16 at 7:00

jQuery, It contains well written, well thought and well explained computer science and This parent() method in jQuery traverse a single level up the selected element Return value: It returns the parent of the selected elements. div class = "​main_div" > How to remove parent element except its child element using jQuery ? Definition and Usage. The element>element selector is used to select elements with a specific parent.. Note: Elements that are not directly a child of the specified parent, are not selected.

How to remove parent element except its child element using jQuery , It contains well written, well thought and well explained computer science and Given an HTML document and the task is to remove the parent element except for its Now, use replaceWith() method to replace the content of parent element by its all child element which is innerHTML = "Click on the button to remove ". The parent() is an inbuilt method in jQuery which is used to find the parent element related to the selected element. This parent() method in jQuery traverse a single level up the selected element and return that element. Syntax: $(selector).parent() Here selector is the selected elements whose parent need to find.

.remove(), If we had any number of nested elements inside <div class="hello"> , they would be removed, too. Other jQuery constructs such as data or event handlers are  This selector takes an absurd amount of cycles (but it still can be fast). If you need to support IE6,IE7, or IE8, this can really screw you if your DOM grows too large; IE throws up the "script is not responding" dialog when a certain number of JS VM instructions are executed, and NOT after a certain amount of time.

Comments
  • i tried but that is(my code) worst code