Question

我是JQUERY和javascript的初学者。在这段代码中，列表项中的每个锚点然后列表项将被删除。我该如何解决这个问题？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
function f(a){
var aa = a.split("_")[1];
 $('#k_'+aa).remove();
}
        </script> 
</head>

<body>
    <ul> 
    <li id="k_1"><a id="1" onclick="f(this.id);">Click1</a></li> 
    <li id="k_2"><a id="2" onclick="f(this.id);">Click2</a></li> 
    <li id="k_3"><a id="3" onclick="f(this.id);">Click3</a></li> 
    </ul>
</body>
</html>

提前感谢所有人!!!

Answer 1

首先，由于您未设置href属性，因此您的链接不会首先显示。必须在链接上设置此项，如果您的链接效果来自javascript，请将其设置为#。

其次，您的javascript完全错误，这就是您的网页应该是什么样子。

方法＃1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function f(a) {
            $('#k_'+a).remove();
        }
    </script> 
</head>
<body>
    <ul> 
    <li id="k_1"><a id="1" href="#" onclick="f(this.id);">Click1</a></li> 
    <li id="k_2"><a id="2" href="#" onclick="f(this.id);">Click2</a></li> 
    <li id="k_3"><a id="3" href="#" onclick="f(this.id);">Click3</a></li> 
    </ul>
</body>
</html>

但是，由于您已经在使用jQuery，因此更合适的解决方案如下：

方法＃2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <ul id="thelist"> 
    <li id="k_1"><a id="1" href="#">Click1</a></li> 
    <li id="k_2"><a id="2" href="#">Click2</a></li> 
    <li id="k_3"><a id="3" href="#">Click3</a></li> 
    </ul>

    <script>
        $("#thelist li").click(function () {
            $(this).remove();
        });
    </script> 
</body>
</html>

这将您的JavaScript和HTML分开，这现在几乎是标准的良好做法。我建议使用方法＃2，除非你有令人信服的理由不这样做。

Answer 2

删除模糊处理的函数名和变量名（或者，如果将其抽象为函数，则将其命名为更可读的名称）。

但是，您可以在一个语句中删除DOM元素。

onclick="$(this).parent().remove(); return false;"

单击列表项内的锚点，列表项将被删除

2 个答案:

方法＃1

方法＃2