在mouseover和mouseout中显示li中的按钮

Question

我制作下一个jsfiddle：

http://jsfiddle.net/alonshmiel/46wyH/9/

请在输入中写入文字，然后按enter键。 （然后再次按enter键。）

当用户将鼠标悬停在li（使用TAB）上时，我想显示/隐藏两个按钮（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

任何帮助表示赞赏！

Answer 1

我更新了你的fiddle这里改变的内容：

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);
}