CODEWITHSUNDEEP
javascriptjqueryhtml
john285
john285

Reputation: 53

Hide element clicked, not the others with same class

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();
     }
   });
});

Upvotes: 0

Views: 297

Answers (5)

madalinivascu
madalinivascu

Reputation: 32364

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);

Upvotes: 0

Pete
Pete

Reputation: 58462

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>

Upvotes: 1

Pranesh Janarthanan
Pranesh Janarthanan

Reputation: 1194

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>

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28621

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();
        }
   });
});

Upvotes: 0

ssamuel
ssamuel

Reputation: 287

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>

Upvotes: 1

Related Questions