如何插入并删除连同其内容链接点击

问题描述:

我是新的使用jQuery,但我真的想包括一些常见的JavaScript功能到我的网站。我有一个向用户提供表单的div,他/她可以输入一些信息。我想要做的是在需要时显示div,但在不需要时隐藏它。如何插入并删除连同其内容链接点击

这里是我使用来选择和删除DIV

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

这里的jQuery代码是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应该删除它。请帮忙!

退房jQuery的.show().hide()

要显示:

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

要隐藏:

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

喜Masaba,欢迎到现场。

您在寻找.show().hide()不是.remove()。删除完全删除HTML,所以你不能再显示它。

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

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

其不工作 – 2013-04-27 00:34:55

$(document).ready(function() 
    { 
     $('#new-request-make').click(function() 
     { 
       $('#newRequestform').show(); 
     }); 
      $("#newRequestCancel").click(function() { 
       $("#newRequestForm").hide(); 
     }); 
    }); 

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

    $("#newRequestLoad").click(function() { 
     $("#newRequestForm").show(); 
    }); 
</script> 

这应该做的伎俩。

在这里,给你一个美丽的礼物。

http://jsfiddle.net/eX3QK/

<div id="login"> 
    <a href="#"><p style="font-size:16px;">Hello</p></a> 
    <div class="arrow_box"> 
     <a href="logout.php">Logout</a> 
    </div> 
</div> 

jQuery是使用,改变HTML标签什么的。

$("#login").click(function(e){ 
    $("#login div").css("visibility","visible"); 
    e.stopPropagation(); 
}); 

$("html").click(function(e){ 
    $("#login div").css("visibility","hidden"); 
});