if parent has child class then hide mother div secondchild class with CSS or Jquery

Will you please tell me that how i hide mother .secondchild if parent has child class.

Here is the code

HTML code

<div class="parent">

    <div class="child">

        children

    </div>

</div>

<div class="mother">

    <div class="secondchild">

        second-child

    </div>

</div>

Here is my script but not working

if ($(".parent").hasClass("child")) {    

    $('.mother .secondchild').hide()

}

edited Nov 20 '18 at 11:54

asked Nov 20 '18 at 11:24

bemo

please format your code

– Eugene Mihaylin
Nov 20 '18 at 11:27

it's already format @EugeneMihaylin

– bemo
Nov 20 '18 at 11:33

@EugeneMihaylin please check and tell me how to do this

– bemo
Nov 20 '18 at 11:33

@bemo check answer.

– Kiranramchandran
Nov 20 '18 at 11:35

1

You can't do this using CSS

– Mohammad
Nov 20 '18 at 12:00

|
show 1 more comment

Will you please tell me that how i hide mother .secondchild if parent has child class.

Here is the code

HTML code

<div class="parent">

    <div class="child">

        children

    </div>

</div>

<div class="mother">

    <div class="secondchild">

        second-child

    </div>

</div>

Here is my script but not working

if ($(".parent").hasClass("child")) {    

    $('.mother .secondchild').hide()

}

edited Nov 20 '18 at 11:54

asked Nov 20 '18 at 11:24

bemo

please format your code

– Eugene Mihaylin
Nov 20 '18 at 11:27

it's already format @EugeneMihaylin

– bemo
Nov 20 '18 at 11:33

@EugeneMihaylin please check and tell me how to do this

– bemo
Nov 20 '18 at 11:33

@bemo check answer.

– Kiranramchandran
Nov 20 '18 at 11:35

1

You can't do this using CSS

– Mohammad
Nov 20 '18 at 12:00

|
show 1 more comment

Will you please tell me that how i hide mother .secondchild if parent has child class.

Here is the code

HTML code

<div class="parent">

    <div class="child">

        children

    </div>

</div>

<div class="mother">

    <div class="secondchild">

        second-child

    </div>

</div>

Here is my script but not working

if ($(".parent").hasClass("child")) {    

    $('.mother .secondchild').hide()

}

edited Nov 20 '18 at 11:54

asked Nov 20 '18 at 11:24

bemo

Will you please tell me that how i hide mother .secondchild if parent has child class.

Here is the code

HTML code

<div class="parent">

    <div class="child">

        children

    </div>

</div>

<div class="mother">

    <div class="secondchild">

        second-child

    </div>

</div>

Here is my script but not working

if ($(".parent").hasClass("child")) {    

    $('.mother .secondchild').hide()

}

javascript jquery html css css3

edited Nov 20 '18 at 11:54

asked Nov 20 '18 at 11:24

bemo

edited Nov 20 '18 at 11:54

asked Nov 20 '18 at 11:24

bemo

edited Nov 20 '18 at 11:54

asked Nov 20 '18 at 11:24

bemo

asked Nov 20 '18 at 11:24

bemo

asked Nov 20 '18 at 11:24

bemo

please format your code

– Eugene Mihaylin
Nov 20 '18 at 11:27

it's already format @EugeneMihaylin

– bemo
Nov 20 '18 at 11:33

@EugeneMihaylin please check and tell me how to do this

– bemo
Nov 20 '18 at 11:33

@bemo check answer.

– Kiranramchandran
Nov 20 '18 at 11:35

1

You can't do this using CSS

– Mohammad
Nov 20 '18 at 12:00

|
show 1 more comment

please format your code

– Eugene Mihaylin
Nov 20 '18 at 11:27

it's already format @EugeneMihaylin

– bemo
Nov 20 '18 at 11:33

@EugeneMihaylin please check and tell me how to do this

– bemo
Nov 20 '18 at 11:33

@bemo check answer.

– Kiranramchandran
Nov 20 '18 at 11:35

1

You can't do this using CSS

– Mohammad
Nov 20 '18 at 12:00

please format your code

– Eugene Mihaylin
Nov 20 '18 at 11:27

it's already format @EugeneMihaylin

– bemo
Nov 20 '18 at 11:33

@EugeneMihaylin please check and tell me how to do this

– bemo
Nov 20 '18 at 11:33

@bemo check answer.

– Kiranramchandran
Nov 20 '18 at 11:35

You can't do this using CSS

– Mohammad
Nov 20 '18 at 12:00

|
show 1 more comment

4 Answers
4

active

oldest

votes

since your parent div has no class called child, your script won't give the desired output.
try this

if($('.parent').children().hasClass('child')){

    $('.mother .secondchild').hide();

}

DEMO HERE

EDIT

Based on OP's Comment hidden the div in the button click.

Html

<button id="btnClick">

Click Me

</button>

$('body').on('click','#btnClick','',function(){

   if($('.parent').children().hasClass('child')){

      $('.mother .secondchild').hide();

   }

});

UPDATED DEMO

edited Nov 20 '18 at 12:11

answered Nov 20 '18 at 11:34

Kiranramchandran

1,980927

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

@bemo can you paste click code?

– Kiranramchandran
Nov 20 '18 at 11:51

is that possible with css thanks

– bemo
Nov 20 '18 at 11:54

@bemo do you want to hide the div on button click?

– Kiranramchandran
Nov 20 '18 at 11:59

add a comment |

    $(function(){

        $("body").on("click",".click",function(){

            if ($(".parent ").children("div.child")) {

                $('.mother .secondchild').hide()

            }

        })

    });

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="parent">

        <div class="child">

            children

        </div>

    </div>

    <div class="mother">

        <div class="secondchild">

            second-child

        </div>

    </div>

    <button class="click">

        button

    </button>

</body>

</html>

edited Nov 20 '18 at 11:55

answered Nov 20 '18 at 11:41

Parvej Alam

2167

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

Now please check i have added a button as per your requirement.

– Parvej Alam
Nov 20 '18 at 11:55

add a comment |

Do this work without any if condition

$(".parent:has(.child)").next().find(".secondchild").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">

  <div class="child">

    children

  </div>

</div>

<div class="mother">

  <div class="secondchild">

    second-child

  </div>

</div>

edited Nov 20 '18 at 12:23

answered Nov 20 '18 at 11:41

Mohammad

15.7k123562

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

add a comment |

You just change "hasclass" to "has", then it works.

if($('.parent').has('.child')){

   $('.mother .secondchild').hide();

}

answered Nov 20 '18 at 16:36

Fatemeh Khosravi Farsani

339

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391974%2fif-parent-has-child-class-then-hide-mother-div-secondchild-class-with-css-or-jqu%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

since your parent div has no class called child, your script won't give the desired output.
try this

if($('.parent').children().hasClass('child')){

    $('.mother .secondchild').hide();

}

DEMO HERE

EDIT

Based on OP's Comment hidden the div in the button click.

Html

<button id="btnClick">

Click Me

</button>

$('body').on('click','#btnClick','',function(){

   if($('.parent').children().hasClass('child')){

      $('.mother .secondchild').hide();

   }

});

UPDATED DEMO

edited Nov 20 '18 at 12:11

answered Nov 20 '18 at 11:34

Kiranramchandran

1,980927

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

@bemo can you paste click code?

– Kiranramchandran
Nov 20 '18 at 11:51

is that possible with css thanks

– bemo
Nov 20 '18 at 11:54

@bemo do you want to hide the div on button click?

– Kiranramchandran
Nov 20 '18 at 11:59

add a comment |

since your parent div has no class called child, your script won't give the desired output.
try this

if($('.parent').children().hasClass('child')){

    $('.mother .secondchild').hide();

}

DEMO HERE

EDIT

Based on OP's Comment hidden the div in the button click.

Html

<button id="btnClick">

Click Me

</button>

$('body').on('click','#btnClick','',function(){

   if($('.parent').children().hasClass('child')){

      $('.mother .secondchild').hide();

   }

});

UPDATED DEMO

edited Nov 20 '18 at 12:11

answered Nov 20 '18 at 11:34

Kiranramchandran

1,980927

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

@bemo can you paste click code?

– Kiranramchandran
Nov 20 '18 at 11:51

is that possible with css thanks

– bemo
Nov 20 '18 at 11:54

@bemo do you want to hide the div on button click?

– Kiranramchandran
Nov 20 '18 at 11:59

add a comment |

since your parent div has no class called child, your script won't give the desired output.
try this

if($('.parent').children().hasClass('child')){

    $('.mother .secondchild').hide();

}

DEMO HERE

EDIT

Based on OP's Comment hidden the div in the button click.

Html

<button id="btnClick">

Click Me

</button>

$('body').on('click','#btnClick','',function(){

   if($('.parent').children().hasClass('child')){

      $('.mother .secondchild').hide();

   }

});

UPDATED DEMO

edited Nov 20 '18 at 12:11

answered Nov 20 '18 at 11:34

Kiranramchandran

1,980927

since your parent div has no class called child, your script won't give the desired output.
try this

if($('.parent').children().hasClass('child')){

    $('.mother .secondchild').hide();

}

DEMO HERE

EDIT

Based on OP's Comment hidden the div in the button click.

Html

<button id="btnClick">

Click Me

</button>

$('body').on('click','#btnClick','',function(){

   if($('.parent').children().hasClass('child')){

      $('.mother .secondchild').hide();

   }

});

UPDATED DEMO

edited Nov 20 '18 at 12:11

answered Nov 20 '18 at 11:34

Kiranramchandran

1,980927

edited Nov 20 '18 at 12:11

answered Nov 20 '18 at 11:34

Kiranramchandran

1,980927

answered Nov 20 '18 at 11:34

Kiranramchandran

1,980927

answered Nov 20 '18 at 11:34

Kiranramchandran

1,980927

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

@bemo can you paste click code?

– Kiranramchandran
Nov 20 '18 at 11:51

is that possible with css thanks

– bemo
Nov 20 '18 at 11:54

@bemo do you want to hide the div on button click?

– Kiranramchandran
Nov 20 '18 at 11:59

add a comment |

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

@bemo can you paste click code?

– Kiranramchandran
Nov 20 '18 at 11:51

is that possible with css thanks

– bemo
Nov 20 '18 at 11:54

@bemo do you want to hide the div on button click?

– Kiranramchandran
Nov 20 '18 at 11:59

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

@bemo can you paste click code?

– Kiranramchandran
Nov 20 '18 at 11:51

is that possible with css thanks

– bemo
Nov 20 '18 at 11:54

@bemo do you want to hide the div on button click?

– Kiranramchandran
Nov 20 '18 at 11:59

add a comment |

    $(function(){

        $("body").on("click",".click",function(){

            if ($(".parent ").children("div.child")) {

                $('.mother .secondchild').hide()

            }

        })

    });

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="parent">

        <div class="child">

            children

        </div>

    </div>

    <div class="mother">

        <div class="secondchild">

            second-child

        </div>

    </div>

    <button class="click">

        button

    </button>

</body>

</html>

edited Nov 20 '18 at 11:55

answered Nov 20 '18 at 11:41

Parvej Alam

2167

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

Now please check i have added a button as per your requirement.

– Parvej Alam
Nov 20 '18 at 11:55

add a comment |

    $(function(){

        $("body").on("click",".click",function(){

            if ($(".parent ").children("div.child")) {

                $('.mother .secondchild').hide()

            }

        })

    });

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="parent">

        <div class="child">

            children

        </div>

    </div>

    <div class="mother">

        <div class="secondchild">

            second-child

        </div>

    </div>

    <button class="click">

        button

    </button>

</body>

</html>

edited Nov 20 '18 at 11:55

answered Nov 20 '18 at 11:41

Parvej Alam

2167

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

Now please check i have added a button as per your requirement.

– Parvej Alam
Nov 20 '18 at 11:55

add a comment |

    $(function(){

        $("body").on("click",".click",function(){

            if ($(".parent ").children("div.child")) {

                $('.mother .secondchild').hide()

            }

        })

    });

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="parent">

        <div class="child">

            children

        </div>

    </div>

    <div class="mother">

        <div class="secondchild">

            second-child

        </div>

    </div>

    <button class="click">

        button

    </button>

</body>

</html>

edited Nov 20 '18 at 11:55

answered Nov 20 '18 at 11:41

Parvej Alam

2167

    $(function(){

        $("body").on("click",".click",function(){

            if ($(".parent ").children("div.child")) {

                $('.mother .secondchild').hide()

            }

        })

    });

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="parent">

        <div class="child">

            children

        </div>

    </div>

    <div class="mother">

        <div class="secondchild">

            second-child

        </div>

    </div>

    <button class="click">

        button

    </button>

</body>

</html>

    $(function(){

        $("body").on("click",".click",function(){

            if ($(".parent ").children("div.child")) {

                $('.mother .secondchild').hide()

            }

        })

    });

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="parent">

        <div class="child">

            children

        </div>

    </div>

    <div class="mother">

        <div class="secondchild">

            second-child

        </div>

    </div>

    <button class="click">

        button

    </button>

</body>

</html>

    $(function(){

        $("body").on("click",".click",function(){

            if ($(".parent ").children("div.child")) {

                $('.mother .secondchild').hide()

            }

        })

    });

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="parent">

        <div class="child">

            children

        </div>

    </div>

    <div class="mother">

        <div class="secondchild">

            second-child

        </div>

    </div>

    <button class="click">

        button

    </button>

</body>

</html>

edited Nov 20 '18 at 11:55

answered Nov 20 '18 at 11:41

Parvej Alam

2167

edited Nov 20 '18 at 11:55

answered Nov 20 '18 at 11:41

Parvej Alam

2167

answered Nov 20 '18 at 11:41

Parvej Alam

2167

answered Nov 20 '18 at 11:41

Parvej Alam

2167

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

Now please check i have added a button as per your requirement.

– Parvej Alam
Nov 20 '18 at 11:55

add a comment |

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

Now please check i have added a button as per your requirement.

– Parvej Alam
Nov 20 '18 at 11:55

Now please check i have added a button as per your requirement.

– Parvej Alam
Nov 20 '18 at 11:55

add a comment |

Do this work without any if condition

$(".parent:has(.child)").next().find(".secondchild").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">

  <div class="child">

    children

  </div>

</div>

<div class="mother">

  <div class="secondchild">

    second-child

  </div>

</div>

edited Nov 20 '18 at 12:23

answered Nov 20 '18 at 11:41

Mohammad

15.7k123562

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

add a comment |

Do this work without any if condition

$(".parent:has(.child)").next().find(".secondchild").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">

  <div class="child">

    children

  </div>

</div>

<div class="mother">

  <div class="secondchild">

    second-child

  </div>

</div>

edited Nov 20 '18 at 12:23

answered Nov 20 '18 at 11:41

Mohammad

15.7k123562

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

add a comment |

Do this work without any if condition

$(".parent:has(.child)").next().find(".secondchild").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">

  <div class="child">

    children

  </div>

</div>

<div class="mother">

  <div class="secondchild">

    second-child

  </div>

</div>

edited Nov 20 '18 at 12:23

answered Nov 20 '18 at 11:41

Mohammad

15.7k123562

Do this work without any if condition

$(".parent:has(.child)").next().find(".secondchild").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">

  <div class="child">

    children

  </div>

</div>

<div class="mother">

  <div class="secondchild">

    second-child

  </div>

</div>

$(".parent:has(.child)").next().find(".secondchild").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">

  <div class="child">

    children

  </div>

</div>

<div class="mother">

  <div class="secondchild">

    second-child

  </div>

</div>

$(".parent:has(.child)").next().find(".secondchild").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">

  <div class="child">

    children

  </div>

</div>

<div class="mother">

  <div class="secondchild">

    second-child

  </div>

</div>

edited Nov 20 '18 at 12:23

answered Nov 20 '18 at 11:41

Mohammad

15.7k123562

edited Nov 20 '18 at 12:23

answered Nov 20 '18 at 11:41

Mohammad

15.7k123562

answered Nov 20 '18 at 11:41

Mohammad

15.7k123562

answered Nov 20 '18 at 11:41

Mohammad

15.7k123562

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

add a comment |

thanks for your great answer but my div child class enter when click on button but when i click on that button then this script not working :( please tell me how to do that

– bemo
Nov 20 '18 at 11:50

add a comment |

You just change "hasclass" to "has", then it works.

if($('.parent').has('.child')){

   $('.mother .secondchild').hide();

}

answered Nov 20 '18 at 16:36

Fatemeh Khosravi Farsani

339

add a comment |

You just change "hasclass" to "has", then it works.

if($('.parent').has('.child')){

   $('.mother .secondchild').hide();

}

answered Nov 20 '18 at 16:36

Fatemeh Khosravi Farsani

339

add a comment |

You just change "hasclass" to "has", then it works.

if($('.parent').has('.child')){

   $('.mother .secondchild').hide();

}

answered Nov 20 '18 at 16:36

Fatemeh Khosravi Farsani

339

You just change "hasclass" to "has", then it works.

if($('.parent').has('.child')){

   $('.mother .secondchild').hide();

}

answered Nov 20 '18 at 16:36

Fatemeh Khosravi Farsani

339

answered Nov 20 '18 at 16:36

Fatemeh Khosravi Farsani

339

answered Nov 20 '18 at 16:36

Fatemeh Khosravi Farsani

339

answered Nov 20 '18 at 16:36

Fatemeh Khosravi Farsani

339

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk