0

我正在进行多项选择测验，并希望在每个选项前面都有一个看起来像 X 的按钮/图标（包括在单选按钮前面），当我单击它时，它只会删除该特定选项。

我该怎么做？例如，如果选项是这些。如何将 X 放在每个选项的前面，然后通过单击某些 X，例如 Blue 前面的一个，Blue 会被删除。

这更像是一个视觉格式问题。由于这恰好是一个列表，我最终在 A 之后和第一个选项的单选按钮之前获得了我的删除图标，在 B 之后和第二个选项的单选按钮之前获得了我的删除图标，依此类推。我希望 X 图标成为第一件事，甚至在 A、B、C、D 等之前。

   <ol type="A">
        <li><input type="radio" id="q2a1" name="question" /> Red</li>
        <li><input type="radio" id="q2a2" name="question" /> Green</li>
        <li><input type="radio" id="q2a3" name="question" /> Blue</li>
        <li><input type="radio" id="q2a4" name="question" /> Brown</li>
    </ol>
4

1 回答 1

1

你可以这样做：

 <ul>
        <li><div class="remove">x</div>A.<input type="radio" id="q2a1" name="question" /> Red</li>
        <li><div class="remove">x</div>B.<input type="radio" id="q2a2" name="question" /> Green</li>
        <li><div class="remove">x</div>C.<input type="radio" id="q2a3" name="question" /> Blue</li>
        <li><div class="remove">x</div>D.<input type="radio" id="q2a4" name="question" /> Brown</li>
    </ul>

然后使用 javascript

var divs = document.getElementsByClassName('remove');
for(var i=0; i<divs.length; i++) { 
  divs[i].addEventListener('click', function() {      
      var li =  this.parentNode;
      this.parentNode.parentNode.removeChild(li)});
}

但你还需要css：

ul li
{
    list-style: none
}
.remove
{
    display: inline-block;
    margin: 2px;
    margin-right: 10px;
    color: red;
    padding-left: 2px;
    padding-right: 2px;
    border: 1px solid gray;
    cursor: pointer;
}

查看jsfiddle，我认为它可以满足您的要求

于 2013-07-28T06:03:25.673 回答