如何隐藏按钮后面的文本-jQuery_Jquery

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

jquery

如何隐藏按钮后面的文本-jQuery,jquery,Jquery,我需要隐藏按钮和文本时，按钮被点击。我让它隐藏按钮，但我无法让我的点击事件隐藏li和p标记中的文本这是到目前为止我已经掌握的Javascript/jQuery代码 $(document).ready(function() { $("#add").click(function() { var html = ""; $("ul").append("<br>" + '<input type="button" class="delete"

我需要隐藏按钮和文本时，按钮被点击。我让它隐藏按钮，但我无法让我的点击事件隐藏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>

谢谢大家!

正如@charlietfl所指出的，您的HTML无效，但是您可以使用jQuery选择下一个元素

 $(".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>

根据评论进行更新

如果向网站动态添加元素，则无法使用。单击，因为它不会绑定到脚本执行后添加的元素。您必须使用jQuery，例如，您可以将其绑定到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函数来附加有效的列表元素，例如

$("#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("");
});

你有一个你试图操纵的HTML的例子吗？那个HTML是无效的。必须是……的孩子。。。。可能不是我当前任务的子项，但当我试图通过jQuery添加一个包含文本的新按钮时，我无法隐藏新任务。您好，请查看我的更新，以解决动态添加元素的问题。提供的代码仍然无法工作。应该是按钮还是按钮？原因.button将其表示为一个类？嗨，它应该是选择器，因此在本例中´.delete`，抱歉：更新了答案我实际上将其从.button更改为.delete！非常感谢你的帮助。我还有一个问题。当我动态添加另一个元素并且我想隐藏动态添加的元素时，它会隐藏整个列表。我创建元素时是否有问题？？

$("#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("");
});