Input mezők értékének törlése egyenként gombbal

Olyan feladatba futottam bele, ahol input mezők értékét kellett törölni egy űrlapon, ahol több dátum mező volt, amihez jquery dátumválasztó volt rendelve, azonban a kiválasztott értéket manuálisan módosítni nem lehet (disabled).

A legkézenfekvőbbnek egy javascript megírása tűnt. A következő kód az oldalon fellelhető összes dátumválasztó esetén megoldást jelentett:

 

<script type="text/javascript">
function DateClear() {
 var numbs = document.getElementsByClassName("datetimepicker").length;
 var x = document.getElementsByClassName("datetimepicker");
  
 for(var i = 0; i < numbs; i++){
 document.getElementById(x[i].id).insertAdjacentHTML('afterend', 'X');
    }
};
DateClear();
function ClearDate(e){
      $(e).val("");
};
</script>

itt a datetimepicker class segítségével van dátum-idő választó jQuery meghívva. Ugyan ezt a class-t felhasználva lekérdezzük az előfordulások számát, majd minden előfordulás ID-je alapján kiválasztjuk és az adott input tag után fűzünk egy span-t, aminek az onclick eseménye az adott ID-jű input értékét üresre állítja.

A gomb megjelenését konkrét esetben így formáztam:

<style>
.datetimepicker:hover+span.clearbtn, span.clearbtn:hover {
 cursor: pointer;
 display: inline-block;
 margin-left: -30px;
 padding: 4px 5px;
 border-radius: 2px;
 background-color: #af0f0f;
 width: 20px;
 height: 20px;
 line-height: 22px;
 color: #fff;
 font-size: 12px;
 text-align: center;
}
</style>

Érdekesség: a két class közötti + lehetővé teszi, hogy az egymást szorosan követő elemek 2. részéhez egyedi formázást rendeljünk. Adott esetben az input mezőt követően került beillesztésre a .clearbtn osztályú span, amit szerettünk volna az inputhoz kötötten megjeleníteni és formázni.