添加删除链接/按钮删除输入字段的内容？

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