ver la referencia :

getElementById devolverá el primer elemento con la ID dada

Puede nombrarlos como ID diferentes si solo desea manejar este problema rápidamente.

La razón por la que su código no funciona es porque usa el atributo id varias veces con el mismo valor. Esto va en contra de los estándares HTML. También usa getElementById que solo puede devolver un solo elemento.

Sugeriría usar clases css para marcar todos los elementos relevantes y usar un selector CSS simple para hacer coincidir todas las casillas marcadas.

 function removeCheckedCheckboxes() { var checked = document.querySelectorAll(".delete-checkbox:checked"); checked.forEach((elem) => { elem.parentElement.style.display = "none"; }) }

 <div id="product-space"> <div class="product"> <input type="checkbox" class="delete-checkbox"> <p> JVC200123 <br> Acme DISC <br> 1.00 $ <br> Size: 700 MB</p> </div> <div class="product"> <input type="checkbox" class="delete-checkbox"> <p> KRK201929 <br> Acme DISC <br> 1.00 $ <br> Size: 700 MB</p> </div> </div> <button type="submit" name="button" value="enter" id="deleteButton" onclick="removeCheckedCheckboxes()">MASS DELETE</button>

Document.getElementById() se usa para encontrar elementos de DOM con ID coincidentes. Devuelve un único objeto Element que representa el elemento cuya propiedad id coincide con la cadena especificada. En su caso, tiene varios elementos con la misma identificación. Por lo tanto, siempre devolverá el primer elemento mientras ejecuta este script. Entonces su segundo elemento permanece en estado visible siempre.

Entonces, un mejor enfoque es elegir el elemento usando el nombre de la clase en lugar de la identificación, porque se supone que la identificación es única y los nombres de las clases no necesitan ser únicos.

Lógica

• Elija los elementos de destino utilizando los nombres de clase. Usé el mismo product de nombres de clase para el div del contenedor y la casilla de verificación de delete-checkbox de verificación.
• Al hacer clic en el botón Eliminar, recorra los elementos con el nombre de clase product .
• Encuentre la casilla de verificación dentro de cada elemento del product al marcar un elemento con delete-checkbox nombre de clase dentro de cada nodo.
• Verifique el estado checked de cada casilla de verificación, si está marcada, oculte la casilla.

violín de trabajo

 var boxes = document.querySelectorAll(".product"); function removeCheckedCheckboxes() { boxes.forEach((box) => { const checkBox = box.querySelector('.delete-checkbox'); if (checkBox.checked == true) { box.style.display = "none"; } }) }

 <div id="product-space"> <div class="product"> <input type="checkbox" class="delete-checkbox"> <p> JVC200123 <br> Acme DISC <br> 1.00 $ <br> Size: 700 MB</p> </div> <div class="product"> <input type="checkbox" class="delete-checkbox"> <p> KRK201929 <br> Acme DISC <br> 1.00 $ <br> Size: 700 MB</p> </div> </div> <button type="submit" name="button" value="enter" id="button" onclick="removeCheckedCheckboxes()">MASS DELETE </button>

lo primero es que ambos artículos tienen la misma identificación y nunca debe usar la misma identificación para varios divs. Cuando usa document.getElementById, devuelve solo el primer objeto y no está eliminando exactamente el código al hacer clic en su botón. Intente obtener su elemento por una clase o un nombre de etiqueta como esos campos de entrada suyos.

 function removeCheckedCheckboxes() { var list = document.getElementsByTagName('input') for (var i = 0; i < list.length; ++i) { var product = list[i] if (product.checked) product.parentElement.hidden = true } }

 <div id="product-space"> <div class="product"> <input type="checkbox"> <p> JVC200123 <br> Acme DISC <br> 1.00 $ <br> Size: 700 MB</p> </div> <div class="product"> <input type="checkbox"> <p> KRK201929 <br> Acme DISC <br> 1.00 $ <br> Size: 700 MB</p> </div> </div> <button type="submit" name="button" value="enter" id="button" onclick="removeCheckedCheckboxes()"> MASS DELETE </button>

https://www.quora.com/Is-it-ever-ok-to-use-the-same-ID-for-multiple-elements-in-HTML-Doesnt-CSS-specificity-make-IDs-more- granular-que-clases-¿Esto-no-viola-las-reglas-de-HTML-¿Hay-alguna-vez-una-razón-para-hacer-esto?