How hidden children element of parent with JS ? (or Jquery)-CodePudding

I would like to hide the <div id='coco'> present in the <div id='altOcr'> with JS or JQuery.

Here is my base code:

<div id='altOcr'>
    <div id='coco'>abc</div>
    <div id='coco'>def</div>
</div>
<div id='altOcr'>
    <div id='coco'>abc</div>
    <div id='coco'>def</div>
</div>

I've been browsing the forum a bit, testing solutions, but it didn't work for me. At least I can not HIDDEN the selected element.

document.getElementById('coco').altOcrNone.style.display='none';

But this code gives me an error :

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

CodePudding user response：

// select all alt0cr divs

const allaltOcr = document.querySelectorAll("#altOcr");


// looping through each div and selecting children to set siplay property. It is not very efficent, but might work for you!

allaltOcr.forEach((e) => {
  const children = e.querySelectorAll("#coco");
  children.forEach(e => { 
   e.style = "display: none"
  })
});

<div id='altOcr'>
    <div id='coco'>abc</div>
    <div id='coco'>def</div>
</div>
<div id='altOcr'>
    <div id='coco'>abc</div>
    <div id='coco'>def</div>
</div>
<div id='coco'>STILL HERE :)</div>

CodePudding user response：

var hideElement = document.getElementById('coco');

hideElement.style.display='none';