Question

我有一个包含列表的定位div。我有一堆附加在图片上的按钮，对应于列表中的文字。我有两个相关的问题。首先，列表本身对于提供的空间来说太长了，所以我需要隐藏它的一部分。如果我能让第二个问题发挥作用，那就没问题。第二个问题是在点击相应的图片后删除项目。所以，如果我点击椅子的图片。单词“Chair”从列表中消失，下面列表的其余部分向上移动到它的空间。我希望这可以在onclick上发生，但我无法弄清楚如何实现它。

这是我的清单

    <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

您的代码对我来说很好，可能是点击上调用的先前函数的问题。试试这个片段，不是你想要的吗？

＆＃13;

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

＆＃13;

 <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>

＆＃13;

删除列表项，用javascript点击图片

2 个答案: