CODEWITHSUNDEEP
jquery
Samantha Cook
Samantha Cook

Reputation: 11

How to hide the text that is located after a button - jQuery

I need to hide the button AND text when the button is clicked on. I have it hiding the button, but I can't get my click event to hide the text within a li and p tag.

This is the Javascript/jQuery code I have so far.

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

This is the HTML code that I am trying to manipulate. 

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

Thank you!

Upvotes: 0

Views: 89

Answers (1)

MrGoofus
MrGoofus

Reputation: 883

As pointed out by @charlietfl your HTML is invalid, but you can use jQuery .next() to select the next <p> element;

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

If your html would be valid and be among the lines of;

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

On button click you could hide the parent <li> and this would hide both text and button at the same time;

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

UPDATE BASED ON A COMMENT

If you dynamically add a element to a website, you can't use .click() as it does not bind to elements that have been added after the script execution. You have to use jQuery .on(), you can for example bind this to body and listen for clicks that match your selector;

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

UPDATE 2

If you want to use the valid HTML you should update your add function as well to append valid list elements, e.g.

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

Upvotes: 1

Related Questions