php - 如何在链接单击上插入和删除 div 及其内容

Question

我是 jQuery 的新手，但我真的想在我的网站中包含一些常见的 javascript 功能。我有一个 div 向用户呈现一个表单，他/她可以在其中输入一些信息。我想做的是在需要时显示 div，但在不需要时隐藏它。

这是我用来选择和删除 div 的 jQuery 代码

<script type="text/javascript">
        $("#newRequestCancel").click(function() {
            $("#newRequestForm").remove();
        });
</script>

这是 html 标签

 <h3 class="main-top">

                    <a href="#" id="new-request-make">New Product</a>
                </h3>
                <div id="newRequestForm" class="panel">
                    <form action="index.php" method="post">
                        <p><label>Title</label><span class="required">*</span></p>
                        <p><input type="text" /></p>
                        <p><label>Image</label><span class="required">*</span></p>
                        <p><input type="file" /></p>
                        <p><label>Description</label><span class="required">*</span></p>
                        <p><textarea></textarea></p>
                        <p><label>Preferred Price [KES]</label><span class="required">*</span></p>
                        <p><input type="number" /></p>
                        <p><label>County</label><span class="required">*</span></p>
                        <p><select><option disabled selected="selected">.: Select a County :.</option></select></p>
                        <p><label>Location</label><span class="required">*</span></p>
                        <p><input type="text" /></p>
                        <br/>
                        <p>Any field marked with an asterisk (<span class="required">*</span>) is required.</p>
                        <br/>
                        <p><input type="submit" value="Make Request" /><span class="ibar"></span><a href="#" id="newRequestCancel">Cancel</a></p>
                        <br/>
                    </form>
                </div>

因此，如果我单击新产品链接，它应该插入 div，而当我单击 div 内的取消链接时，它应该删除它。请帮忙!

Answer 1

您好，Masaba，欢迎来到该网站。

您正在寻找 .show() 和 .hide() 而不是 .remove()。删除会完全删除 HTML，因此您无法再次显示它。

$("#newRequestCancel").click(function() {
        $("#newRequestForm").hide();
    });

$("#new-request-make").click(function() {
    $("#newRequestForm").show();
});