CSSクラス（ボタンをクリックして追加）が存在するかどうかを確認して何かをする

Question

クラスが存在するかどうかを検出したいが、この単純な関数を使って要素がクラスを持っているかどうかを検出しようとしているが、作業。

var parent = document.querySelector('.menu'), 
child = document.querySelector('.liked'); 

if (parent.contains(child)) { 
$('.empty').addClass("none") 
} 

ご協力いただければ幸いです。
ありがとうございます。

$(document).on("click", ".click", function() { 
 
    $(".submenu").addClass("liked") 
 
}) 
 

 
var parent = document.querySelector('.menu'), 
 
    child = document.querySelector('.liked'); 
 

 
if (parent.contains(child)) { 
 
    $('.empty').addClass("none") 
 
}

body { 
 
    font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif 
 
} 
 

 
.none { 
 
    display: none 
 
} 
 

 
.liked { 
 
    color: red 
 
} 
 

 
button { 
 
    cursor: pointer 
 
}

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

 
<button class=click> 
 
ADD CLASS LIKED 
 
</button> 
 

 
<div class=menu><br> 
 
    <span class=submenu>ONE</span> 
 
    <span class=submenu>TWO</span> 
 
    <span class=submenu>THREE</span> 
 
</div> 
 

 
<div class=empty><br>IF CLASS 'VISITED' EXIST, THIS TEXT MUST GO</div>

Answer 1

あなたのロジックは、ページのロード時に一度実行されています。そのような関数に追加すると、clickイベントでも実行できます。

function childCheck() { 
 
    var parent = document.querySelector('.menu'), 
 
    child = document.querySelector('.liked'); 
 

 
    if (parent.contains(child)) { 
 
    $('.empty').addClass("none") 
 
    } 
 
} 
 

 
childCheck(); // run on page load (optional) 
 

 
$(document).on("click", ".click", function() { 
 
    $(".submenu").addClass("liked") 
 
    childCheck(); // run here on click event 
 
})

body { 
 
    font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif 
 
} 
 

 
.none { 
 
    display: none 
 
} 
 

 
.liked { 
 
    color: red 
 
} 
 

 
button { 
 
    cursor: pointer 
 
}

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

 
<button class=click> 
 
ADD CLASS LIKED 
 
</button> 
 

 
<div class=menu><br> 
 
    <span class=submenu>ONE</span> 
 
    <span class=submenu>TWO</span> 
 
    <span class=submenu>THREE</span> 
 
</div> 
 

 
<div class=empty><br>IF CLASS 'VISITED' EXIST, THIS TEXT MUST GO</div>

Answer 2

まず、私は無地のJSでのjQueryの混合のファンではありません。前後に跳ね返っていくとちょっと荒々しく感じられるので、ちょっとクリーンアップすると、以下の私の答えはjQueryだけになります。

第2に、ボタンをクリックしてもう一度チェックしたい場合、コードはclickハンドラになければなりません。現在のところ、ページの負荷のみを評価しています。

$(function() { 

    checkIfParentContainsChild(); //Run on page load 

    $(document).on("click", ".click", function() { 
     $(".submenu").addClass("liked"); 
     checkIfParentContainsChild(); //Run on button click 
    }); 

}); 

function checkIfParentContainsChild() { 
    var $child = $(".menu .liked");  //Select all .liked with parent .menu 
    var childExists = ($child.length > 0); //Result will be true or false 

    //EDITED PER COMMENT 
    if (childExists) { 
     $('.empty').addClass("none"); 
    } else { 
     // ...DOESN'T EXIST 
    } 
}