Question

这是我的HTML代码

<li id="one" class="hot">figs <div class="closeit">[x]</div></li>
<li id="two" class="hot">pine nuts<div class="closeit">[x]</div></li>
<li id="three" class="hot">honey<div class="closeit">[x]</div></li>

我想要做的是让这个'[x]'可点击，当我点击它时，这个li将被隐藏。那么如何在JS中做到这一点？任何帮助表示赞赏。

Answer 1

$('.closeit').click(function(){
  $(this).parent().hide();
})

Fiddle

Answer 2

这是一个使用jQuery的工作示例（你在标签中提到过它。）

它为[x] div的'click'事件添加了一个监听器，并隐藏了父li。

您应该通过this article了解有关jQuery DOM事件的更多信息。

$('.closeit').on('click',function(){
   $(this).parent().hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one" class="hot">figs <div class="closeit">[x]</div></li>
<li id="two" class="hot">pine nuts<div class="closeit">[x]</div></li>
<li id="three" class="hot">honey<div class="closeit">[x]</div></li>
</ul>

Answer 3

添加您的JS代码：

$('.closeit a').click(function(){
    $(this).hide()
})

在你的HTML中：

<li id="one" class="hot">figs 
    <div class="closeit">
        <a>[x]</a>
    </div>
</li>

Answer 4

您可以简单地使用jquery的.hide()函数。

如下所示。

＆＃13;

$('.closeit ').click(function() {
  $(this).hide();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="one" class="hot">figs <div class="closeit">[x]</div></li>
<li id="two" class="hot">pine nuts<div class="closeit">[x]</div></li>
<li id="three" class="hot">honey<div class="closeit">[x]</div></li>

＆＃13;

使用JS可以查看文本

4 个答案: