为什么这个 jQuery parent("form") 不工作

Question

我制作了一个将按钮与属性链接的表单，但它没有隐藏 parent("form")

但是当我尝试这个时它起作用了

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

我不知道这段代码有什么问题

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

请帮助我谢谢

Answer 1

.parent() 只有 select 是直接父级（上一级）。 .parents() 将 select 一直向上延伸到祖先链。

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

Answer 2

您也可以使用 .closest()，它只会 select 最接近的 parent 而不是所有 parent 匹配。

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

Answer 3

你只需要在表单中添加一个 id 并使用 jquery 抓取它，然后调用 .hide()

表单 id="我的表单"....

在正文末尾添加此脚本标签。

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

我觉得当我们在使用jquery的时候，没有必要因为复杂的选择器而苦恼

为什么这个 jQuery parent("form") 不工作

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

html

javascript

jquery

parent