Javascript 在“鼠标插入”和“鼠标退出”对话框中显示按钮

我做下一个JSFIDLE：

请在输入中写入文本，然后按

enter

键。（然后再次按

enter

键）

当用户将鼠标移到li（带选项卡）上时，我想显示/隐藏两个按钮（

x

和

v

），如下图所示：

我做了两个功能：

function showRemoveButton(element) {
    // I guess I need to create an element of span:
     var span = document.createElement('span');
     span.className = "closeButton";
     span.innerHTML = "x";
     element.appendChild(span);

     span = document.createElement('span');
     span.className = "closeButton";
     span.innerHTML = "v";
     element.appendChild(span);
}

function hideRemoveButton(element) {
    // remove the span element
    element.childNodes[1].parentNode.removeChild(element.childNodes[1].remove());
    element.childNodes[1].parentNode.removeChild(element.childNodes[1].remove());
}

我有两个问题：

1) the `x` and `v` are not added in the right side of the li (like in the example).

我试着做：

float:right但它不起作用

2) when mouse out the li (the li that has TAB), the hideRemoveButton Throw an exception

感谢您的帮助
 我更新了你的网站，以下是我修改的内容：

function showRemoveButton(element) {
    $(element).find("span").show();
}

function hideRemoveButton(element) {
    $(element).find("span").hide();
}

还将此功能与代码一起添加，以添加按钮：

function addButtons(element) {
    // I guess I need to create an element of span:
     var span = document.createElement('span');
     span.className = "closeButton";
     span.innerHTML = "x";
     element.appendChild(span);

     span = document.createElement('span');
     span.className = "closeButton";
     span.innerHTML = "v";
     element.appendChild(span);
}