入力をクリアする方法：after要素

Question

this websiteをご覧ください。 2つの検索バーがあり、各検索バーの後に:after要素があります。その要素をクリックすると、テキストボックスはクリアされます。どうすればJavascriptでこれを行うことができますか？ （何jqueryのない）

Answer 1

You can't add event listeners to pseudo-elements。しかしここでは、要素には擬似要素以外の内容がないので、イベントリスナーを要素に追加するだけでよいのです。

var input = document.getElementById('input'); 
 
document.getElementById('clear').addEventListener('click', function() { 
 
    input.value = ''; 
 
});

#clear::after { 
 
    content: '\00d7'; 
 
    cursor: pointer; 
 
}

<input id="input" value="Hello" /> 
 
<span id="clear" title="Clear"></span>

Answer 2

イベントは上で実際にはないクリック：擬似要素の後に、しかし、スパン自体に（あなたがhereを見ることができるように）擬似要素だけでアイコンを提供し、空想は何もありませんここに行く。それでは、このようなことをするだけの問題です。

element.addEventListener('click', function() { 
    document.getElementById('startInput').value = ''; 
}, false); 

Answer 3

私はそれが何か特別だとは思わない。このような 何か：

var elementList = document.getElementsByClassName('something'); 
for (var i = 0; i < elementList.length; i++) { 
    elementList[i].addEventListener("click", delFn); 
} 


function delFn(){ 
console.log("delete it"); 
} 

https://jsfiddle.net/5w4obgzu/1/