Why this jQuery parent("form") is not working

user_16473468 0
Viewed 63

I made a form that links a button with from an attribute but it's not hiding the parent("form")

but when I try this it works

$($("[editFormContent]").attr("editFormContent")).click(function(e) {
    e.preventDefault();
    alert();
});

I don't know whats the problem with this code 

$($("[editFormContent]").attr("editFormContent")).click(function(e) {
    e.preventDefault();
    $(this).parent("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
    <div class="breadcrumb col-100">
        <h2>UserProfile @<?=$_SESSION['Dname']?></h2>
        <small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
    </div>
    <div class="card col-100 ">
        <form method="post" editFormContent="#edit">    
            <table class="col-100">
                <tr>
                    <th width="50%"></th>
                    <th width="50%"></th>
                </tr>
                <tr>
                    <label>
                        <td>First Name</td>
                        <td>
                            <span class="editFormSpan">Fname Lname</span>
                        </td>
                    </label>
                </tr>
                <tr>
                    <td colspan="2"><a href="" id="edit">Edit</a></td>
                </tr>
            </table>
        </form>
    </div>
</div>

Pls Help me Thanks

parent html jquery javascript
3 Answers

.parent() only selects the direct parent (one level up). .parents() will select all the way up the ancestor chain.

$($("[editFormContent]").attr("editFormContent")).click(function(e) {
    e.preventDefault();
    $(this).parents("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
    <div class="breadcrumb col-100">
        <h2>UserProfile @<?=$_SESSION['Dname']?></h2>
        <small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
    </div>
    <div class="card col-100 ">
        <form method="post" editFormContent="#edit">    
            <table class="col-100">
                <tr>
                    <th width="50%"></th>
                    <th width="50%"></th>
                </tr>
                <tr>
                    <label>
                        <td>First Name</td>
                        <td>
                            <span class="editFormSpan">Fname Lname</span>
                        </td>
                    </label>
                </tr>
                <tr>
                    <td colspan="2"><a href="" id="edit">Edit</a></td>
                </tr>
            </table>
        </form>
    </div>
</div>

user_8926290

You can also use .closest() which will only select the nearest parent that matches instead of all parents.

$($("[editFormContent]").attr("editFormContent")).click(function(e) {
    e.preventDefault();
    $(this).closest("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
    <div class="breadcrumb col-100">
        <h2>UserProfile @<?=$_SESSION['Dname']?></h2>
        <small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
    </div>
    <div class="card col-100 ">
        <form method="post" editFormContent="#edit">    
            <table class="col-100">
                <tr>
                    <th width="50%"></th>
                    <th width="50%"></th>
                </tr>
                <tr>
                    <label>
                        <td>First Name</td>
                        <td>
                            <span class="editFormSpan">Fname Lname</span>
                        </td>
                    </label>
                </tr>
                <tr>
                    <td colspan="2"><a href="" id="edit">Edit</a></td>
                </tr>
            </table>
        </form>
    </div>
</div>

user_83448200

You just need to add an id to your form and grab it with jquery, then calling .hide()

form id="myForm" ....

Add this script tag at the end of the body.

<script>
    $(document).ready(function () {
        $('#edit').click(function(e){
            e.preventDefault();
            $('#myForm').hide();
        });
    });
</script>

I think when we are using jquery, there is no need to make our life hard with complicated selectors.

user_42415150
Related