Buenos días, estoy intentando mostrar y ocultar el botón delete si el file esta vacío o no y no sé muy bien como hacerlo, creo que es cun un display show y hide, pero no estoy seguro
HTML
<div style="margin-left: 225px; margin-top: -65px;" id="carta_nominador_div">
<label for="carta_nominador" style="color: #fff; background: #000; width: 142px; height: 52px; border-radius: 100px;cursor: pointer;">
<span class="iborrainputfile" style="margin-left: 27px;">ATTACH FILE</span>
</label>
<span id="fichero_seleccionado" style="font-size: 14px; margin-left: 160px; margin-top: -33px; position: absolute;"></span>
<input type="file" name="carta_nominador" id="carta_nominador" class="validaCarta inputfile inputfile-1">
</div>
<script>
$("#carta_nominador").change(function(){
var fichero_seleccionado = $(this).val();
var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\\]/, ''); //Eliminamos el path hasta el fichero seleccionado
$("#fichero_seleccionado").text(nombre_fichero_seleccionado);
});
</script>
<div class="boton" style="width:110px; margin: -45px 0 5px 600px;"><a href="#" id="delCarta" style="position: absolute; color: #fff;text-decoration: none;text-transform: uppercase;margin-top: 15px;margin-left: -25px;">Delete</a></div>
JQUERY
$('#delCarta').click(
function(){
clearFileInputField('carta_nominador_div');
clearNameFile('fichero_seleccionado');
$("#carta_nominador").change(function(){
var fichero_seleccionado = $(this).val();
var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\\]/, ''); //Eliminamos el path hasta el fichero seleccionado
$("#fichero_seleccionado").text(nombre_fichero_seleccionado);
});
}
);
});
function clearNameFile(tagId) {
//document.getElementById(tagId).textContent = "";
$("#"+tagId).text("");
}
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}
Cómo podría hacer que esté oculto el botón DELETE y cuando se seleccione un archivo se muestre el botón?
Muchas gracias