如何清除輸入：元素後

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

click事件，其實並不是在：after僞元素，但在跨度本身（因爲你可以看到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/