如何清除输入：元素之后

Question

看看this website。有2个搜索栏，每个搜索栏后面都有一个:after元素。单击该元素时，将清除文本框。我怎么能用Javascript做到这一点？ （没有jquery）

Answer 1

You can't add event listeners to pseudo-elements。但是这里元素除了伪元素之外没有其他内容，所以你只需要将事件监听器添加到元素中。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

click事件实际上不在：after伪元素之后，而是在span本身上（如你所见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/