How to hide child field collection using jquery

Question

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.

Answer 1

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