1

I would like to know if this method exist in JS

JS

this.template.querySelector(".month").display='none';

HTML

        <h3>Month</h3>
        <lightning-input name="Month" label="Month" onchange={handleMonthChange} value={month}></lightning-input>
    </div>

1 Answer 1

5

You can use like below: Standard attributes are generally not rendered directly on elements in HTML (as LWC will modify elements at run time). So, add data-name attribute.

<lightning-input data-name="Month" name="Month" label="Month" onchange={handleMonthChange} value={month}>

Now, you query it as mentioned below:

this.template.querySelector("lightning-input[data-name=Month]").style.display='none';

Here you are getting lightning-input tag with data-name attribute as Month. To use class name you can use ".class-name". Ofcourse there is no need of data-name attribute if you have single lightning-input in your component. But if there are multiple inputs, then this.template.querySelector("lightning-input") will return first lightning-input. So better to have data- attribute for unique identification.

Further read: https://salesforcesas.home.blog/2019/07/16/lwc-selectors-identification-of-elements/

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .