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

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

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

按下delete（删除）按钮还将向他们发送一条文本确认信息，确认该文件已被删除

我已经附上了一个jpeg我正在尝试做的事情

我使用wordpress和gravity表单作为我的表单生成器。我在想也许有一个jquery解决方案可以做到这一点，但不知道如何做到

我的一个输入字段的代码如下所示，我表单上的inout字段都是相同的代码，但id不同，所以我不想将所有内容都粘贴到这里，只将1作为示例

<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>

列表
//这将是删除输入字段“input_15_144”内容的链接

感谢您的帮助！

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

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

jQuery的val（）满足您的需要

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

试试这个

$(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
 });
});

$（函数（）{
$（“.ginput_container”）.append（“”）；//追加删除链接
$（“#删除链接”）。单击（函数（）{
$（'#input_15_144'）.val（''）//将文本字段设置为空
$（“.ginput\u container”）.append（“
成功-您的链接已被删除请尝试此操作

$(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
 });
});

$（函数（）{
$（“.ginput_container”）.append（“”）；//追加删除链接
$（“#删除链接”）。单击（函数（）{
$（'#input_15_144'）.val（''）//将文本字段设置为空
$（“.ginput\u container”）.append（“
成功-您的链接已被删除如果我误解了您的问题，很抱歉，但要重置输入类型文本字段，您只需将其值设置为空字符串：

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

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

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

HTML


您可以根据需要进行样式设置。我已经创建了包含您所需功能的简单eg。如果您有任何问题，请告诉我。
HTML


您可以根据需要进行样式设置。我已经创建了简单的eg，其中包含您想要的功能。如果您有任何问题，请告诉我。
在这里，我为小提琴添加了自定义
ID
等。您可以用您喜欢的方式使用它：

较老的：-

编辑
为了满足更新的要求，进行了更多的编辑

-

HTML代码

列表
删除



列表
删除



jQuery代码
$（文档）.ready（函数（）{
$（“li div按钮”）。在（'单击'，函数（）上{
$（此）.prev（“输入”）.val（“”）；
$（this.parent（）.append（'成功！您的链接已被删除'）；
});
});
在这里，我为小提琴添加了自定义
ID
等。您可以按照自己喜欢的方式使用它：

较老的：-

编辑
为了满足更新的要求，进行了更多的编辑

-

HTML代码

列表
删除



列表
删除



jQuery代码
$（文档）.ready（函数（）{
$（“li div按钮”）。在（'单击'，函数（）上{
$（此）.prev（“输入”）.val（“”）；
$（this.parent（）.append（'成功！您的链接已被删除'）；
});
});
将您尝试过的代码发布出来now@Dasun-是的，对不起，我忘记添加了，现在完成了…@AravindVel谢谢，但这似乎是在谈论添加链接/字段。我只想删除我字段的内容。发布你的代码，你已经尝试了now@Dasun-是的，很抱歉我忘了添加，现在完成了…@AravindVel，谢谢，但看起来s来讨论添加链接/字段。我只想删除字段的内容。我会将其包装成一个函数，然后通过onclick将元素id传递给它。我会将其包装成一个函数，然后通过onclick将元素id传递给它。嗨，这看起来很好。但是在具有多个输入的同一表单上如何工作呢？我添加了另一个o JS fiddle，但不确定如何在JS中添加另一个ID？[link]-还有一点很棒，那就是如果你每次按下按钮时都没有出现该消息并复制它。@Redwall仍在努力添加一个大小写，直到那时，请检查编辑。：）您好，这看起来很好。但是在同一个表单上，如果有多个输入，这将如何工作？我在JS fiddle中添加了另一个，但不确定如何在JS中添加另一个ID？[link]-另外，如果您每次按下按钮时都没有出现该消息，并且该消息重复出现，那就太棒了。@Redwall仍在添加一个大小写，直到那时，请检查编辑。：）您好，谢谢您的回答。当有超过1个字段时，我有一点问题。它们有唯一的id，但我无法使其工作。我在JSFIDLE中修改了您的代码。您能再看一看吗？我真的很抱歉必须这样做，但我刚刚意识到我的删除按钮实际上将位于NEA下的单独li元素中我想删除的字段。真的很抱歉，我应该从一开始就仔细检查，我只是认为它会以这种方式呈现，我不能更改它，因为我使用重力形式。我在这里更新了一个JSFIDLE，如果你愿意再看一看，谢谢。如果你想这样做，你就不能像我写的那样概括编码。你必须为单独的事件编写js代码感谢更新，但不会删除URL。如果我能够像这样在li元素中移动delete按钮，会更容易吗？这可能会解决问题（将事件添加到click handler）…让我知道这是否适用于您Hi感谢您的回答。我在那里遇到了一点问题
$(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>');
    });
});