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() 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>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>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.