Question 200122 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can i get the child input(checkbox) html element?

This is my current code

const unitDiv = document.querySelector(
              `[data-schemapath="${options.form_name_root}.outcomes.improvements.${outcomeIndex}.outcomes.${individualOutComeIndex}.parameters.items.${eachItemIndex}.unit"]`
            );

const unitDivCheckbox = unitDiv?.firstChild?.firstChild?.firstChild;

if (unitDivCheckbox) {
        (unitDivCheckbox as HTMLElement).style.display = 'none';
 }

As you can see I am using multiple firstChild. I want to avoid that.

What I want to remove is an input checkbox. Is there any smart way to make this works?

Side Note.

There is only 1 input checkbox inside unitDiv.

HTML

<div class="je-panel je-object__container" id="Edit Poll.outcomes.improvements.0.outcomes.0.parameters.items.0" data-schematype="object" data-schemapath="Edit Poll.outcomes.improvements.0.outcomes.0.parameters.items.0" style=""><h4 style="display: inline-block;" class="je-object__title"><button type="button" title="Collapse" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-collapse json-editor-btntype-toggle"><i class="icon icon-arrow-down"></i><span> </span></button><label>item 1</label></h4><span class="btn-group je-object__controls" style="display: none;"><div style="display: none;" class="je-modal"><textarea class="form-input je-edit-json--textarea"></textarea><button type="button" title="Save" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-save json-editor-btntype-save"><i class="icon icon-check"></i><span> Save</span></button><button type="button" title="Copy" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-copy json-editor-btntype-copy"><i class="icon icon-copy"></i><span> Copy</span></button><button type="button" title="Cancel" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-cancel json-editor-btntype-cancel"><i class="icon icon-cross"></i><span> Cancel</span></button></div><div style="display: none;" class="je-modal"><div class="property-selector"></div><input type="text" class="form-input property-selector-input" placeholder="Property name..."><button type="button" title="Add" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-add json-editor-btntype-add"><i class="icon icon-plus"></i><span> Add</span></button><div style="clear: both;"></div></div><button type="button" title="Edit JSON" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-edit json-editor-btntype-editjson"><i class="icon icon-edit"></i><span> JSON</span></button><button type="button" title="Object Properties" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-edit_properties json-editor-btntype-properties" style="display: none;"><i class="icon icon-menu"></i><span> properties</span></button></span><div style="display: none;"></div><div class="je-panel"><div class="container je-noindent"><div><div class="columns"><div class="column col-12" data-schematype="string" data-schemapath="Edit Poll.outcomes.improvements.0.outcomes.0.parameters.items.0.category"><div class="form-group"><label class="required je-label form-label">category</label><input type="text" class="form-input" disabled="" readonly="true" name="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][category]" aria-label="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][category]"></div><div></div></div></div><div class="columns"><div class="column col-12" data-schematype="string" data-schemapath="Edit Poll.outcomes.improvements.0.outcomes.0.parameters.items.0.name"><div class="form-group"><label class="required je-label form-label">name</label><input type="text" class="form-input" disabled="" readonly="true" name="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][name]" aria-label="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][name]"></div><div></div></div></div><div class="columns"><div class="column col-12" data-schematype="string" data-schemapath="Edit Poll.outcomes.improvements.0.outcomes.0.parameters.items.0.screen"><div class="form-group"><label class="required je-label form-label">screen</label><input type="text" class="form-input" disabled="" readonly="true" name="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][screen]" aria-label="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][screen]"></div><div></div></div></div><div class="columns"><div class="column col-12" data-schematype="string" data-schemapath="Edit Poll.outcomes.improvements.0.outcomes.0.parameters.items.0.unit"><div class="form-group"><label class="je-label form-label"><input type="checkbox" style="margin: 0px 10px 0px 0px; display: none;" class="json-editor-opt-in">unit</label><input type="text" class="form-input" disabled="" readonly="true" name="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][unit]" aria-label="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][unit]"></div><div></div></div></div><div class="columns"><div class="column col-12" data-schematype="string" data-schemapath="Edit Poll.outcomes.improvements.0.outcomes.0.parameters.items.0.strength"><div class="form-group"><label class="je-label form-label"><input type="checkbox" style="margin: 0px 10px 0px 0px; display: none;" class="json-editor-opt-in">strength</label><input type="text" class="form-input" disabled="" readonly="true" name="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][strength]" aria-label="Edit Poll[outcomes][improvements][0][outcomes][0][parameters][items][0][strength]"></div><div></div></div></div></div></div></div><div></div><span class="btn-group"><button type="button" title="Delete item" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-delete delete json-editor-btntype-delete" data-i="0"><i class="icon icon-delete"></i><span> item</span></button><button type="button" title="Move down" class="btn btn-sm btn-primary mr-2 my-1 json-editor-btn-movedown movedown json-editor-btntype-move" data-i="0" style="display: none;"><i class="icon icon-downward"></i><span> </span></button></span></div>
Tags:

2

Answers


  1. 0

    Your code snippet doesn’t reveal enough about the DOM structure. However,
    if this Code block is executed as a response to an event that has happened over that checkbox then you should be able to access the DOM element (target) directly from the event object. Another approach would be if you have control over the DOM structure then you can add a specific class or id to the DOM element that you want to query. Last is to use a query similar to this

    [data-schemapath="${options.form_name_root}.outcomes.improvements.${outcomeIndex}.outcomes.${individualOutComeIndex}.parameters.items.${eachItemIndex}.unit"] > [type=checkbox]

    I would strongly suggest that you detail your example further to get answers that are more specific to your question.

    Login or Signup to reply.
  2. 0

    querySelector use css selectors

    const unitDivCheckbox = document.querySelector(
    `[data-schemapath="${options.form_name_root}.outcomes.improvements.${outcomeIndex}.outcomes.${individualOutComeIndex}.parameters.items.${eachItemIndex}.unit"] input[type=checkbox]`
);

if (unitDivCheckbox) {
    (unitDivCheckbox as HTMLElement).style.display = 'none';
}

    or you can use querySelector again

    ...
const unitDivCheckbox = unitDiv?.querySelector('input[type=checkbox]')

if (unitDivCheckbox) {
    (unitDivCheckbox as HTMLElement).style.display = 'none';
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search