Question

单击按钮时，我需要隐藏按钮AND文本。我隐藏了按钮，但是我无法通过点击事件来隐藏li和p标签中的文本。

这是我到目前为止的Javascript / jQuery代码。

$(document).ready(function() {

    $("#add").click(function() {
        var html = "";

        $("ul").append("<br>" + '<input type="button" class="delete" value="Task Complete">');

        html += "<li>" + $("#task").val() + "</li>";
        $("ul").append(html);
        $("#task").val("");
    }); // end click

    $(".delete").click(function(){
        $(this).hide();
        $(this)..hide();

    }); //end delete click

}); // end ready

这是我试图操纵的HTML代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task List</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="tasks.js"></script>    
</head>

<body>
    <aside>
        <h2>Add a task</h2>
        <label for="task">Task:</label>
        <input type="text" id="task" name="task"><br>
        <label>&nbsp;</label>
        <input type="button" id="add" name="add" value="Add Task"> 
    </aside>
    <main>
        <h1>Task list</h1>
        <ul>
            <input type="button" class="delete" value="Task Complete">
            <p><li>Wash car</li></p>

            <input type="button" class="delete" value="Task Complete">
            <p><li>Fertilize lawn</li></p>

            <input type="button" class="delete" value="Task Complete">
            <p><li>Clean out refrigerator</li></p>
        </ul>
    </main>
    <footer></footer>
</body>
</html>

谢谢！

Answer 1

正如@charlietfl所指出的，您的HTML无效，但您可以使用jQuery .next()来选择下一个<p>元素;

 $(".delete").click(function(){
     var $this = $(this);
     $this.hide();
     $this.next('p').hide();
 });

如果您的HTML有效且属于以下行;

<ul>
    <li><input type="button" class="delete" value="Task Complete">
    <p>Wash car</p></li>

    <li><input type="button" class="delete" value="Task Complete">
    <p>Fertilize lawn</p></li>

    <li><input type="button" class="delete" value="Task Complete">
    <p>Clean out refrigerator</p></li>
</ul>

点击按钮，您可以隐藏父<li>，这会同时隐藏文字和按钮;

 $(".delete").click(function(){
     $(this).parent().hide();
 });

基于评论的更新

如果您动态地向网站添加元素，则不能使用.click（），因为它不会绑定到脚本执行后添加的元素。您必须使用jQuery .on()，例如，您可以将其绑定到body并侦听与您的选择器匹配的点击次数;

 $("body").on("click", ".delete", function(){
     $(this).parent().hide();
     // OR DEPENDS ON THE HTML YOU GO WITH
     var $this = $(this);
     $this.hide();
     $this.next('p').hide();
 });

更新2

如果你想使用有效的HTML，你应该更新你的添加功能，以附加有效的列表元素，例如

$("#add").click(function() {
    var html = "";

    var button = '<input type="button" class="delete" value="Task Complete">';
    var taskText = '<p>' + $("#task").val() + '</p>'

    html += "<li>" + button + taskText + "</li>";
    $("ul").append(html);
    $("#task").val("");
});

如何隐藏位于按钮后面的文本 - jQuery

1 个答案: