How to hide child field collection using jquery I have 3 field collection 1st is parent in that having other 2 is child field collections.


parent FC: Student Info 
child FC 1: English Info
child FC 1: Maths Info


Set field setting "unlimited" to parent field collection(i.e Student Info). 

Now I want hide 2 child field collection (i.e English Info and Maths Info) on click of "Add another item"
I have hide child FC using jquery

For exmaple: 

jQuery('.child1').hide();

jQuery('.child2').hide();


Child field collection hide initially, but if I click "Add another item" button then jquery removed and child FC shows. I have tried to bind click event in jquery but it's not working.
Can you replace the code in your JS file with the following:

(function ($, Drupal, drupalSettings) {

  'use strict';

  Drupal.behaviors.myModuleName = {
    attach: function (context, settings) {
        $('#node-student-form .field--type-field-collection .field--name-field-child-english-info').css("display","none"); // Child FC 1 
        $('#node-student-form .field--type-field-collection .field--name-field-child-maths-info').css("display","none"); // Child FC 2
    }
  };

})(jQuery, Drupal, drupalSettings);


This is based on this article
The attach() function ensures that your code runs each time an Ajax call is made