Você pode criar uma função no javascript que testa qual elemento foi desmarcado.
Exemplo:
function VerificaDesmarcado(elemento){
// Se o check não estiver marcado, removo a DIV
if(!elemento.checked){
// Código para remover a DIV
} else {
// Código para exibir a DIV
}
}
E depois chamar essa função no evento click do checkbox:
<input type="checkbox" onclick="VerificaDesmarcado(this);">
Caso queira testar o código, fiz um esboço bem simples no fiddle:
http://jsfiddle.net/t5xpoc9d/
EDIT
Conforme solicitado, farei uma sugestão para remover somente os dados vinculados ao checkbox selecionado.
Como você tem apenas 3 checkboxes, você pode criar um id para cada um deles no html. Assim ficará mais fácil de vincular o checkbox com os dados que serão exibidos.
Exemplo:
<input id="chk1" type="checkbox" onclick="VerificaDesmarcado(this);">
O segundo passo é você colocar os dados de cada um dentro de uma DIV do HTML e deixar essa div com o atributo hidden. Depois é só chamar essa DIV e remover ou adicionar o hidden para esconder ou exibir de acordo com o checkbox.
<div id="dadosChk1" hidden>
<label>Nome</label>
<input type="text" value="Nome do usuário"/>
</div>
Depois de ter o id do checkbox você saberá quais dados exibir de acordo com o mesmo. Portanto, o primeiro passo é recuperar o id do checkbox quando o mesmo for clicado:
function VerificaDesmarcado(elemento){
let idCheck = elemento.id;
// Se o check não estiver marcado, removo a DIV
if(!elemento.checked){
if(idCheck.equals('chk1')){
const divDados = document.querySelector('#dadosChk1');
divDados.setAttribute('hidden', false);
}
} else {
// Código para exibir a DIV
}
}
texto
.imagens
de código é o fato de não podermos copiar o código e inserir em uma IDE para retifica-lo. Se o código estiver comotexto
, então podemos sim copia-lo e cola-lo na IDE para realizar as devidas correções, caso precise.