单击带有 javascript 的图片删除列表项

Question

我有一个包含列表的定位 div。我有一堆按钮附在与列表中的单词相对应的图片上。我有两个相关的问题。首先，列表本身对于提供的 space 来说太长了，所以我需要隐藏其中的一部分。如果我能让第二期开始工作，那没关系。第二个问题是在点击相应图片后删除项目。因此，如果我单击椅子的图片。 "Chair" 一词从列表中消失，其下方列表的其余部分向上移动到 space 中。最好我希望它在单击时发生，但我不知道如何完成它。

这是我的清单

    <div class="absolute2">
<div class="translist">
<ul>
    <li id="penina">5 penina</li>
    <li id="pua">5 pua</li>
    <li id="salulima">Salu lima</li>
    <li id="manulele">Manulele</li>
    <li id="fatu">Fatu</li>
    <li id="ialapoa">I‘a lāpo‘a</li>
    <li id="gata">Gata</li>
    <li id="lima">Lima</li>
    <li id="pili">Pili</li>
    <li id="aveau">‘Aveau</li>
    <li id="uati">Uati</li>
    <li id="vaaroketi">Va‘a rōketi</li>
    <li id="masinamoana">Māsina moana</li>
 </ul>   
</div>
</div>

这是按钮之一

    <td rowspan="3" colspan="4"><a href="javascript:;" onclick="MM_nbGroup('down','navbar2','n_r2_c8','images/_r2_c8_s2.jpg',1); cutList(manulele); incrementValue(); this.onclick=null;"><img name="n_r2_c8" src="images/_r2_c8.jpg" width="53" height="47" id="n_r2_c8" alt="" /></a></td>

此按钮应该删除列表项 "Manulele" 我没有尝试太多，因为我能找到的解决方案都是jquery，而我不能使用jquery。以下是我尝试使用各种变体失败的方法。请协助。

function cutList(itemid) {
  var element = document.getElementById( itemid );
  element.parentNode.removeChild(element);
}

Answer 1

将 manulele 括在引号中

 cutList('manulele');

有效

Answer 2

你的代码对我来说没问题，可能是之前点击调用的函数有问题。试试代码片段，是不是您想要的？

function cutList(itemid) {
  var element = document.getElementById( itemid );
  element.parentNode.removeChild(element);
}

 <div class="absolute2">
<div class="translist">
<ul>
    <li id="penina">5 penina</li>
    <li id="pua">5 pua</li>
    <li id="salulima">Salu lima</li>
    <li id="manulele">Manulele</li>
    <li id="fatu">Fatu</li>
    <li id="ialapoa">I‘a lāpo‘a</li>
    <li id="gata">Gata</li>
    <li id="lima">Lima</li>
    <li id="pili">Pili</li>
    <li id="aveau">‘Aveau</li>
    <li id="uati">Uati</li>
    <li id="vaaroketi">Va‘a rōketi</li>
    <li id="masinamoana">Māsina moana</li>
 </ul>   
</div>
</div>
<button onclick="cutList('manulele')">Remove</button>

单击带有 javascript 的图片删除列表项

Remove a list item onclick a picture with javascript

javascript

html-lists