添加刪除鏈接/按鈕刪除輸入字段的內容？

Question

我使用具有多個輸入字段的輸入形式。

這些輸入字段可以預先填充，所以我想給用戶提供了一個「刪除」鏈接或按鈕，刪除該輸入字段的全部內容字段旁邊，然後刪除的一個容易的選擇。

按下刪除鍵也會給他們，這已經被刪除的文本確認。

我重視的是什麼我想

我使用WordPress和重力形式我的表單生成器做一個JPEG。我想可能有一個jQuery解決方案來做到這一點，但不知道如何？

我的輸入字段之一的代碼如下，我的表單中的inout字段都是相同的代碼，但不同的id當然，所以我不想在這裏粘貼一切只是作爲一個exmpale。

<li id="field_15_144" class="gfield"> 
    <label class="gfield_label" for="input_15_144">List</label> 
    <div class="ginput_container"> 
    <input id="input_15_144" class="medium" type="text" tabindex="40" value="" name="input_144"> 
    </div> 
    // this would be the link to delete the contents of input field "input_15_144 
    <a href="" class="deleteURL">Delete</a> 
</li> 

感謝您的幫助！

Answer 1

HTML

<div class="ginput_container"> 
    <input id="input_15_144" class="medium" type="text" tabindex="40" value="www.google.com" name="input_144"> 
    <a href="#" id="delete">delete</a> <br/>  
     <span id="msg" style="color:green;"><span> 
</div> 

jQuery的

$('a#delete').click(function(){ 
$('input#input_15_144').val(''); 
$('span#msg').html('deleted successfully');        
});​ 

check the demo

，只要你想你可以做的造型。我創建了簡單的例子，其中包括你想要的功能。如果您有任何問題，請告訴我。

Answer 2

jQuery的VAL（）做你需要什麼。在上面的例子中，你可以使用這樣的功能。

$('#input_15_144').val(''); 

Answer 3

試試這個

$(function(){ 
$(".ginput_container").append('<a href="#" onclick="return false;" id="delete_link">delete</a>'); // append a delete link 

    $('#delete_link').click(function(){ 
     $('#input_15_144').val(''); // set the textfield empty 
     $(".ginput_container").append('<br><span>Success - Your link has been deleted</span'); // put a success message 
}); 
}); 

您可以申請的CSS格式

Answer 4

很抱歉，如果我誤解了你的問題，但復位輸入型文本字段，你只需將其值設置爲空字符串：

$('#id').val(''); 

Answer 5

這裏，我添加了自定義ids等爲小提琴。你可以使用它，你喜歡的方式：

老年人：jsFiddle - Lewdh

編輯

爲了滿足新的需求，更多的編輯被做了。

jsFiddle - Lewdh/4/

HTML代碼

<li id="field_15_144" class="gfield"> 
    <label class="gfield_label" for="input_15_144">List</label> 
    <div class="ginput_container" id="inpContain"> 
     <input id="input_15_144" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_144" /> 
     <button value="delete">Delete</button><br /> 
    </div> 
</li> 
<li id="field_15_145" class="gfield"> 
    <label class="gfield_label" for="input_15_145">List</label> 
    <div class="ginput_container" id="inpContain"> 
     <input id="input_15_145" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_145" /> 
     <button value="delete">Delete</button><br /> 
    </div> 
</li> 

jQuery代碼

$(document).ready(function() { 
    $("li div button").on('click', function() { 
     $(this).prev("input").val(''); 
     $(this).parent().append('<span style="color: green;">Success! Your link has been deleted.</span>'); 
    }); 
});