如何插入並刪除連同其內容鏈接點擊

Question

我是新的使用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應該刪除它。請幫忙！

Answer 1

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

要顯示：

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

要隱藏：

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

Answer 2

喜Masaba，歡迎到現場。

您在尋找.show()和.hide()不是.remove()。刪除完全刪除HTML，所以你不能再顯示它。

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

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

Answer 3

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

Answer 4

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

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

這應該做的伎倆。

Answer 5

在這裏，給你一個美麗的禮物。

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"); 
});