Variavel is not defined (Javascript)

Question

function RemoverForro(valor){
   var valorForro = valor;
}

$(add_button7).click(function(e){
      e.preventDefault();
      if(l < max_fields7){
          l++;
          $(wrapper7).append(
            '<div id="tipo_forro_div_'+ l +'" class="input-group margin">'+
            '<div id="tipo_forro_nome_'+ l +'"></div>'+
              '<div class="input-group-btn">'+
                '<button type="button" class="btn btn-danger" id="delete" onclick="RemoverForro('+ l +')" href="#">Remover</button>'+
              '</div>'+
              '&emsp;<select name="forro_tipo'+ l +'" id="forro_tipo'+ l +'" required style="width: 25%; margin-bottom: 10px; margin-top: 20px" onchange ="exibir_ocultar_forro(this, '+ l +')">'+
                      '<option value="">Selecione</option>'+
                      '<option value="1">Gesso (Placas)</option>'+
                      '<option value="2">Gesso Acartonado</option>'+
                      '<option value="3">Fibra Mineral</option>'+
                      '<option value="4">Laje</option>'+
                      '<option value="0">Outros</option>'+
                  '</select>'+
                  '<div id="outros_forro'+ l +'" style="display: none; margin-bottom: 10px; margin-left: 15px; font-size: 14px"><input id="outros_forro'+ l +'" type="text"  placeholder="Especifique" name= "outros_forro'+ l +'"/></div>'+
                  '<input type="text" style= "width: 21%; margin-left: 15px; font-size: 14px" name="forro_qtd'+ l +'" id= "forro_qtd'+ l +'" placeholder="Quantidade" required/> m<sup>2</sup>'+
              '</div>'); //add input box
      }


$(wrapper7).on("click","#delete", function(e){
      e.preventDefault(); document.getElementById("tipo_forro_div_"+ valorForro).remove(); l--; <?= $l--?>
  })

Ai when you press the remove button appears the error "valueForro is not defined"

Answer 1

She really is not...

See that valorForro, is restricted to the scope of the method RemoverForro(valor), as well as land max_fields7 at the $(add_button7).click(), although in that case they were not even declared...

function RemoverForro(valor){
   var valorForro = valor;
}

And you’re trying to access it from:

$(wrapper7).on("click","#delete", function(e){
      e.preventDefault(); document.getElementById("tipo_forro_div_"+ valorForro).remove(); l--; <?= $l--?>
  })

To "fix" you can declare and initialize outside of the method and just change its value according to the conditions.

var valorForro = null;

function RemoverForro(valor){
   valorForro = valor;
}

$(add_button7).click(function(e){
      e.preventDefault();
      if(l < max_fields7){
          l++;
          $(wrapper7).append(
            '<div id="tipo_forro_div_'+ l +'" class="input-group margin">'+
            '<div id="tipo_forro_nome_'+ l +'"></div>'+
              '<div class="input-group-btn">'+
                '<button type="button" class="btn btn-danger" id="delete" onclick="RemoverForro('+ l +')" href="#">Remover</button>'+
              '</div>'+
              '&emsp;<select name="forro_tipo'+ l +'" id="forro_tipo'+ l +'" required style="width: 25%; margin-bottom: 10px; margin-top: 20px" onchange ="exibir_ocultar_forro(this, '+ l +')">'+
                      '<option value="">Selecione</option>'+
                      '<option value="1">Gesso (Placas)</option>'+
                      '<option value="2">Gesso Acartonado</option>'+
                      '<option value="3">Fibra Mineral</option>'+
                      '<option value="4">Laje</option>'+
                      '<option value="0">Outros</option>'+
                  '</select>'+
                  '<div id="outros_forro'+ l +'" style="display: none; margin-bottom: 10px; margin-left: 15px; font-size: 14px"><input id="outros_forro'+ l +'" type="text"  placeholder="Especifique" name= "outros_forro'+ l +'"/></div>'+
                  '<input type="text" style= "width: 21%; margin-left: 15px; font-size: 14px" name="forro_qtd'+ l +'" id= "forro_qtd'+ l +'" placeholder="Quantidade" required/> m<sup>2</sup>'+
              '</div>'); //add input box
      }


$(wrapper7).on("click","#delete", function(e){
      e.preventDefault(); document.getElementById("tipo_forro_div_"+ valorForro).remove(); l--; <?= $l--?>
});