<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8"><style type="text/css">
span{
margin: 5px;
font-size: 24px;
color: #FF0000;
cursor: pointer;
}
span.test{
margin: 5px;
font-size: 16px;
color: #000000;
}
span.test:after{
content: '';
display: block;
}
</style>
</head>
<body>
<span>что</span><span>где</span><span>когда</span><span>почему</span><span>как</span>
<div></div>
<script>
[].forEach.call(document.querySelectorAll('span'), function(item) {
item.addEventListener('click', function() {
var div = document.querySelector('div');
var clone = item.cloneNode(true);
div.appendChild(clone);
var del = item.cloneNode();
del.innerHTML = 'X';
del.className = 'test';
del.addEventListener('click', function() {
div.removeChild(clone);
div.removeChild(del);
})
div.appendChild(del);;
});
});
</script>
</body>
</html>
