How to access an element inside a div in jQuery?

Question

here's my html code :

    <section>
        <div class="article">
            
            <p>
                things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
            </p>
        </div>
    </section>
    <br>    
    <section>
        <div class="article">

            <p>
                things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
            </p>
        </div>
    </section>  
    <br>
    <section>
        <div class="article">

            <p>
                things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
            </p>
        </div>
    </section>

that my jquery code :

$(document).ready(function(){

    $(".article").append('<span class="close" style="top:0px;background:#000;color:#fff;padding:10px;cursor:pointer;">X</span>');

        $(".close").click(function(){
            $(this).parents(".article > p").hide();
        

    });

});

I want to hide <p> when the user click on span , how can i have access to <p> only by jquery instead of typing <span>X</span> 3 times in html ?

charlietfl · Accepted Answer · 2020-07-03 15:36:00Z

1

The issue here is you can't use parents() to look up to a parent and have that same selector look inside the parent

Some alternatives are use find() or siblings():

// go up to the parent then find the descendents inside that parent
$(this).parents(".article").find("p").hide();
// OR the span is a sibling of the `<p>` and can target them directly
$(this).siblings("p").hide()// or toggle() if want to show again on alternate clicks

edited Jul 3, 2020 at 15:36

answered Jul 3, 2020 at 15:28

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 0 · Accepted Answer · 2020-07-03 15:45:06Z

Try using find().

parents() uses filter() under the hood to check whether the node matches the selector. Here the p node matches .article > p, but its not one of the parents of .close

$(document).ready(function() {

  $(".article").append('<span class="close" style="top:0px;background:#000;color:#fff;padding:10px;cursor:pointer;">X</span>');

  $(".close").click(function() {
    $(this).parents(".article").find('p').hide();
  });

});

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

    <p>
      things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
    </p>
  </div>
</section>
<br>
<section>
  <div class="article">

    <p>
      things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
    </p>
  </div>
</section>
<br>
<section>
  <div class="article">

    <p>
      things aren't thing anymore they basically copy of originally thing created bu someone no one know as now we can calll them copy's
    </p>
  </div>
</section>

Collectives™ on Stack Overflow

How to access an element inside a div in jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related