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

Question

我正在使用带有多个输入字段的输入表单。

这些输入字段可以预先填充，因此我想给用户一个简单的删除选项，然后在字段旁边删除“删除”链接或按钮，删除该输入字段的全部内容。

按下删除按钮也会给他们一个确认已被删除的文本。

我附上了我正在尝试做的事情

我使用wordpress和gravity表格作为我的表单构建器。我想也许有一个jquery解决方案来做到这一点，但不知道如何？

我的输入字段之一的代码如下，我的表单上的inout字段都是相同的代码，但当然不同的id，所以我不想将这里的所有内容都粘贴为1作为一个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

在这里，我为小提琴添加了自定义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>');
    });
});

Answer 2

jQuery的val（）可以满足您的需求。在上面的例子中，你可以使用这样的函数。

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

Answer 3

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 4

试试这个

$(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 5

很抱歉，如果我误解了您的问题，但要重置输入类型文本字段，则只需将其值设置为空字符串：

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