jquery - jQueryを使用して内部Divを非表示にする

Question

    <a href="#"> Link1  </a>  
    <div id="parent">
         <div id="child1">
                    Here is the Child One
         </div>
         <div id="child2">
                    Here is the Child Two
         </div>
    </div>

jqueryを使用してchild1divを非表示にするにはどうすればよいですか？

アップデート

Link1をクリックするとchild1を非表示にしたい

Answer 1

jQuery を使用する理由

CSS

 #child1{
   display: none;
 }

または、本当にjQueryを使用したい場合

$("#child1").hide();

クリック時に非表示にする場合: マークアップで ID を使用しているため、これは非常に簡単です。

$("#parent").click(function() {
   $("#child1").hide();
});

Answer 2

$('div#parent > div#child1').hide(); 

の直接の子を隠すための上#parent。

クリック用

$('YOURLINK').on('click',function()
{
    $('div#parent > div#child1').hide();
});

Answer 3

試してみてください

$("#child1").hide();

または、次のように試すことができます

$("#child1").css('display','none');

編集した質問に基づいて、次のようになります

$("#link1").click(function(e){
     e.preventDefault();
     $("#child1").hide();
});

http://jquery.com/で jquery の機能を参照してください。

http://api.jquery.com/selector/の jquery セレクターを参照してください。

Answer 4

div内の最初のインナーチャイルドを隠したい場合:-

$('#link1ID').click(function(){        
    $('div#parent div:first').hide();    
});

子 ID を使用して非表示にする場合:-

 $('#link1ID').click(function(){            
        $('div#parent div#child1').hide();        
 });

Answer 5

$(document).ready(function(){
     $("#link1").on('click',function(){
         $("#child1").hide();
     });
});

child2 についても同じです。

Answer 6

これにより、child1 onclick link1 と child2 onclick link2 が非表示になります

デモ

$('a').click(function(e){
    e.preventDefault()
    $(this).closest('div').hide();
});

親divの下のリンクのchild1 onclickを非表示にする場合

$('a').click(function(e){
    e.preventDefault()
    $(this).parentsUntil('parent').find('#child1').hide();
});

HTML

<div id="parent">
     <div id="child1">
         <a href="#">link1</a>
     </div>
     <div id="child2">
         <a href="#">link2</a>
     </div>
</div>

Answer 7

次のように、子を選択して非表示にするだけです。

$("#parent").children().hide();

次に、必要なときにいつでも子を選択して表示/非表示/何でもします。