Btukfyl

I want to hide an element if 'this class' exists, but the parent shares the same class with other elements.

Basically, the HTML is:

<div class="mailing-list">

   <input type="submit">

</div>



<div class="mailing-list">

   <input type="submit">

</div>



<div class="mailing-list">

   <input type="submit">

</div>

If the button is clicked, it will add the following just to the element clicked:
<span class="confirm">Joined</span>

What I want to do know is, if class="confirm" exists, hide the input, just for the element clicked, not all of them

I was trying with:

$("#org-lists").each(function() {

   $(this).find(".mailing-list").each(function() {

     if($('.confirm').length) {

       $('#org-lists .mailing-list').find('input[type="submit"]').hide();

     }

   });

});

In addition to existing answers, you can also use :has https://api.jquery.com/has-selector/

$('.mailing-list:has(.confirm) input[type="submit"]').hide();

To fix your original code, you need to add this to give:

$("#org-lists").each(function() {

    // this = org-list

    $(this).find(".mailing-list").each(function() {

        // this = mailing-list

        // find if this mailing-list has a confirm (need >0 check)

        if ($(this).find('.confirm').length > 0) {

            // this still = mailing-list

            $(this).find('input[type="submit"]').hide();

        }

   });

});

hide the input element and append the span tag to its parent class

$('input').click(function(){

  $(this).hide();

  $(this).parent().append('<span class="confirm">Joined</span>');

});

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

<div class="mailing-list">

   <input type="submit">

</div>



<div class="mailing-list">

   <input type="submit">

</div>



<div class="mailing-list">

   <input type="submit">

</div>

You need to bind it to the click event:

$('.mailing-list > input').on('click', function() {

  var $input = $(this),

    $parent = $input.parent();  // this is the mailing list

    

  $parent.append('<span class="confirm">Joined</span>'); // add joined span

  $input.hide(); // hide input

});

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

<div class="mailing-list">

   <input type="submit">

</div>



<div class="mailing-list">

   <input type="submit">

</div>



<div class="mailing-list">

   <input type="submit">

</div>

If you want to do it in a loop separately from the click event then you can use a filter:

$('.mailing-list').filter(function() {

  return $(this).children('.confirm').length;  // filter any mailing lists with a child of confirm

})

.children('input')  // get the inputs of the filtered

.hide();            // hide them

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

<div class="mailing-list">

  <input type="submit">

  <span class="confirm">Joined</span>

</div>



<div class="mailing-list">

  <input type="submit">

</div>



<div class="mailing-list">

  <input type="submit">

</div>

Sounds like you need to observe the DOM to run the above loop if you can't bind it to a click:

$('.mailing-list > input').on('click', function() {  

  $(this).parent().append('<span class="confirm">Joined</span>'); // add joined span - this is other code not important

});



// Select the node that will be observed for mutations

var targetNodes = document.querySelectorAll('.mailing-list');



// Options for the observer (which mutations to observe)

var config = { attributes: false, childList: true, subtree: false };



// Callback function to execute when mutations are observed

var callback = function(mutationsList, observer) {   

    for(var mutation of mutationsList) {

        if (mutation.type == 'childList') {

          $('.mailing-list').filter(function() {

  return $(this).children('.confirm').length;  // filter any mailing lists with a child of confirm

})

.children('input')  // get the inputs of the filtered

.hide();            // hide them

        }

    }

};



// Create an observer instance linked to the callback function

var observer = new MutationObserver(callback);



// watch the mailing list divs

for (i = 0; i < targetNodes.length; i++) {

  observer.observe(targetNodes[i], config);

}

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

<div class="mailing-list">

   <input type="submit">

</div>



<div class="mailing-list">

   <input type="submit">

</div>



<div class="mailing-list">

   <input type="submit">

</div>

This is the solution required, @ssamuel code used here.

  $(document).on('click', '.mailing-list', function () {

       $(this).find("input").hide(); 

       $(this).parent().append('<span class="confirm">Joined</span>');

                });

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

<div class="mailing-list">

   <input type="submit" value="1">

</div>



<div class="mailing-list">

   <input type="submit"  value="2">

</div>



<div class="mailing-list">

   <input type="submit"  value="3">

</div>

Do a loop over each .confirm element, select the input (by doing up to the parent) and hide it

$('.confirm').each(function(){

     $(this).parent().find('input[type="submit"]').hide();

});

you will need to call this after you add your .confirm elements, better if you call the hide when you append .confirm like

$('input[type="submit"]').on('submit',function(e){

   e.preventDefault();

   $(this).parent().append('<span class="confirm">Joined</span>');

   $(this).hide();

   //other code here

})

another option will be to create a interval and call the function on a specific time

setInterval(function(){  $('.confirm').each(function(){

         $(this).parent().find('input[type="submit"]').hide();

 }); }, 30);