Скрыть элемент, если в соседнем div есть ссылка с определенным class?

Question

Как сделать p с классом ays_restart_button_p display: none, если в div с классом ays_score_message есть ссылка с классом calss_dalee? Этот блок собирается не сразу, а когда пользователь ответит на все вопросы в quiz (без перезагрузки страницы). Ниже приведу html структуру:

<div class="ays_quiz_results_page">
    <div class="ays_score_message">
        <p>
            <a class="calss_dalee" href="/tehnicheskaya/c1-projden/">Далее</a>
        </p>
    </div>
    <div class="ays_message"></div>
    <p class="ays_score animated tada"></p>
    <div class="ays-progress third">
        <span class="ays-progress-value third"></span>
        <div class="ays-progress-bg third">
            <div class="ays-progress-bar third"></div>                
        </div>            
    </div>
    <p class="ays_restart_button_p"></p>
</div>

Answer 1

Как вариант можно проверять вот так:

function checkElem () {
  $('.ays_score_message a').hasClass("calss_dalee") && $('.ays_restart_button_p').hide();
}

$('#add').on('click', ()=> {
  $('.ays_score_message').append('<p><a class="calss_dalee" href="/tehnicheskaya/c1-projden/">Далее</a><p>');
  checkElem();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ays_quiz_results_page">
    <div class="ays_score_message">
    </div>
    <div class="ays_message"></div>
    <p class="ays_score animated tada"></p>
    <div class="ays-progress third">
        <span class="ays-progress-value third"></span>
        <div class="ays-progress-bg third">
            <div class="ays-progress-bar third"></div>                
        </div>            
    </div>
    <p class="ays_restart_button_p">Visible Message</p>
</div>

<button id="add">Add link</button>

Answer 2

Если надо отследить событие изменения содержимого, например: <div class="ays_score_message"> , то можно сделать так.

function checkElem () {
  jQuery('.ays_score_message a').hasClass("calss_dalee") && jQuery('.ays_restart_button_p').hide();
}

jQuery('.ays_score_message').bind("DOMSubtreeModified",function(){
    console.log(this);
      checkElem();
});

БЛОГ НА HUSL

Скрыть элемент, если в соседнем div есть ссылка с определенным class?

Ответы (2 шт):