CODEWITHSUNDEEP
javascriptjqueryhtml
Amrinder Singh
Amrinder Singh

Reputation: 5502

How to hide content between two specific id by jQuery?

I have to hide everything between two certain divs with different ids.

For example:

<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>

Like in above example, I want to hide the div between id a1 and a2.

Upvotes: 1

Views: 1440

Answers (7)

balachandar
balachandar

Reputation: 825

You can achieve this using nextUntil(). In one line: 

$("#a1").nextUntil("#a2").hide();

Example:

$(document).ready(function() {
  $("#hide").click(function() {
    var hideElement = $("#a1").nextUntil("#a2");
    hideElement.hide();
  });
});

<div id="a1">Hi</div>
<div>Some Random Text</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>
<button id="hide">hide</button>

jsFiddle

Note that nextUntil() doesn't include stray text nodes, see this question for a solution to that.

Upvotes: 3

Azad
Azad

Reputation: 5272

use simple jquery,

$("#a1+div").hide();

or using css

#a1+div{
display: none;
}

if you want to delete everything between those two divs try this,

$("#a1").nextAll().each(function(){
    if($(this).attr("id") != "a2"){
        $(this).hide();
    }
    else{
        //element found with id 'a2' so exit;
        return false;
    }
});

Upvotes: 0

Jitu jahagirdar
Jitu jahagirdar

Reputation: 65

Its better if you hide by using the css only.

#a1,#a2 {
display:none;
}
<div id="a1">Hi</div>
    <div>Some Random Text</div>
    <div id="a2">Hello</div>

Upvotes: 0

Jitu jahagirdar
Jitu jahagirdar

Reputation: 65

ITs simply use the element id and hide() function

$(document).ready(function(){
  
$("#a1,#a2").hide();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>

.

Upvotes: -1

Sami
Sami

Reputation: 2110

If the cotrols are all siblings, you can use the .nextUntil() or .prevUntil() jQuery selector. See this or this for details.
If however the controls don't share the same parent, there's no simple selector. You'll have to create a method to find the parents of the controls and propably their parents etc.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

HI now you can hide this in css

    #a1, #a1 ~ #a2{display:none;}
<div id="a1">Hi</div>
    <div>Some Random Text</div>
    <div id="a2">Hello</div>

Upvotes: 2

Tushar
Tushar

Reputation: 87203

Use nextAll with each.

$('#a1').hide().nextAll().each(function() {
  $(this).hide();

  if ($(this).attr('id') === 'a2') {
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>HELLO</div>
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>
<div>BYE</div>

Upvotes: 3

Related Questions