Delete Input-Text

In meinem Beispiel lasse ich ein kleines X neben dem Input einfahren, um den Text wieder zu löschen - eine kleine, nette Spielerei.

Wenn Ihr Anregungen oder Kommentare zu den Gimmicks habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code
Input löschen
X

Code 

HTML:

<div class="input-div">
	<input type="text" name="myname"><span class="delete-input">X</span>
</div>







CSS:

.input-div{
	position:relative;
	display:inline-block;
	width:270px;
	height:auto;
	margin:10px 0;
	background-color:var(--white);
	border:1px solid var(--skillflow-base-font-color);
	overflow:hidden;
}

input[name='myname']{
	width:230px;
	height:15px;
	border-color:transparent;
	background-color:var(--white);
	color:var(--black) !important;
}

.delete-input{
	position:relative;
	right:-30px;
	display:inline-block;
	padding:5px;
	cursor:pointer;
	color:var(--red) !important;
	font-weight:600;
	transition: right .5s;
}

.delete-input-show{
	right:-5px;
	transition: right .5s;
}






JavaScript:

// Nur wenn das Input vorhanden
if(document.querySelector('input[name="myname"]')){
	
	// Input-Element Zuweisen
	 const myInput  = document.querySelector('input[name="myname"]');
	
	// Löschbutton Zuweisen
	 const myDelete = document.querySelector('.delete-input');
	
	// Input EventListener zuweisen "Focus"
	myInput.addEventListener('focus', function(){
		
		// Löschbutton neu Klasse zuweisen
		myDelete.classList.add('delete-input-show');
	}); 
	
	// Input EventListener zuweisen "Blur" (Wenn der Focus verloren geht)
	myInput.addEventListener('blur', function(){
		
		// Löschbutton neu Klasse wegnehmen 
		myDelete.classList.remove('delete-input-show');
	});
	
	// Löschbutton Click zuweisen 
	myDelete.addEventListener('click', function(){
		
		// Inputfeld löschen
		myInput.value = '';
	});
}