Add and Remove Field through Checkbox

Question

I have a form where I select colors for the page, and in it there is a checkbox with the option of usar padrão do site, the moment I click on this checkbox it removes the field, but when I uncheck the checkbox he should create the field again.

How would you do that?

<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>

Answer 1

After you remove, there is no way to recover. The correct one would be to hide and not remove, according to the argument given in onclick. To not send the field, change to disabled when to hide (disabled fields are not sent to Submit):

function enableColorsBackground(e) {
   var inp = document.getElementById('background');
   inp.style.display = e ? "none" : "inline";
   inp.disabled = e ? true : false;
}

function enableColorsTitle(e) {
   var inp = document.getElementById('color-title');
   inp.style.display = e ? "none" : "inline";
   inp.disabled = e ? true : false;
}

<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">
    <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>

The argument e of the function is the value sent in this.checked, which may be true or false. If it is true, will apply display none (hides the element); on the contrary, display inline (shows the element).

Answer 2

Using Jquery you can solve this problem using the function toggle() easily, note that I removed the event onclick of checkbox and added a id:

New checkbox

<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" id="changeBackground"> Usar Padrão do
        site
        <input type="color" name="background" id="background">
    </div>
</div>

<script>
    $("#changeBackground").click(function(){
        if($("#changeBackground").is(":checked")){
            $("#background").attr("disabled","true");
            $("#background").hide();
        }else{
            $("#background").removeAttr("disabled");
            $("#background").show();
        }
    });

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