How do I access a container inside another container in Jquery?

0

I'm making a function to modify these groups of buttons, but I'm not sure how to access containers inside containers with Jquery.

<div class="buttons">
  <button aria-label="Right">Right</button>
  <button aria-label="Left">Left</button>
  <button aria-label="Center">Center</button>
  <button aria-label="Expand">Expand</button>
</div>

I can access this container with $(selector) , however I want to delete the button with aria-label="Expand" . I thought intuitively in $(selector)[0].$("[aria-label=\"Expanded\"]").remove() , but gave syntax error. How do I access a container inside another container in Jquery?

    
asked by anonymous 29.08.2018 / 16:00

2 answers

2

Try using as follows:

$('.buttons').find('[aria-label="Expand"]').remove();

We are selecting all children of the div containing the buttons class with the $('.buttons') selector. After that, we ask you to find the element that contains the aria-label="Expand" attribute, then find it by simply removing it with the remove() function.

    
29.08.2018 / 16:06
1

It's very simple, use the css framework

$(document).ready(function(){

$("#resultado").text($('.buttons button[aria-label="Expand"]').attr("aria-label"));
//oque você quer
$('.buttons button[aria-label="Expand"]').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="buttons">
  <button aria-label="Right">Right</button>
  <button aria-label="Left">Left</button>
  <button aria-label="Center">Center</button>
  <button aria-label="Expand">Expand</button>
</div>
<span id="resultado"></span>
    
29.08.2018 / 16:06