Tenho um formulário onde eu seleciono cores para o pagina, nele há um checkbox com a opção de `usar padrão do site`, no momento que clico nesse checkbox ele remove o campo, mas quando eu desmarcar o `checkbox` ele deveria criar o campo novamente.

Como faria isso?


[![inserir a descrição da imagem aqui][1]][1]

  [1]: https://i.sstatic.net/Pz4F8.png



```
<div class="form-group row">
    {{ Form::label('metadata', 'Título', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::text('title', null, ['class' => 'form-control',  'placeholder' => 'Digite um Titulo','required' => true]) }}
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Sub-título', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::text('subtitle', null, ['class' => 'form-control',  'placeholder' => 'Digite um Sub-Titulo']) }}
    </div>
</div>


<div class="form-group row">
    <label for="metadata" class="col-sm-2 col-form-label">Cor de fundo:</label>
    <div class="col-sm-10">
        <input name="" type="checkbox" value="background" onclick="enableColorsBackground(this.checked)"> Usar Padrão do
        site
        <input type="color" name="background" id="background">
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Cor do título:', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-6">
        <input name="" type="checkbox" value="color-title" onclick="enableColorsTitle(this.checked)"> Usar Padrão do
        site
        <input type="color" name="color-title" id="color-title">
    </div>
</div>


<script>
    function enableColorsBackground() {
        document.getElementById('background').remove() ;
    }

    function enableColorsTitle() {
        document.getElementById('color-title').remove();
    }
</script>
```