javascript - jQuery IF 语句查找所有具有空值的输入并删除相应的元素

Question

我正在尝试创建一个 jQuery 脚本，其工作原理如下:检查所有输入以查看其字段是否为空 (null)。如果它是空的，则转到下一个出现的范围(同级元素)，找到该范围内包含的其子图像并将其删除。这就是我到目前为止所拥有的。

if ($("input").val() == "") {
$(this).next("span").find("img:first").remove();
}

我将其拆开并尝试在控制台中仅运行内部代码并稍加修改。我的目的只是删除该 img。

$("input").next("span").find("img:first").remove();

永远无法让它发挥作用。从技术上讲，跨度内只有一个 img，但我只是为了好玩而保留它。

知道如何首先让我的独立代码行工作，然后将其合并到 IF 语句中吗？另外，我是否正确使用了(这个)？谢谢。

每个请求的表单 HTML:

<div class="voucher-input first-input">
   Voucher 1: <input style="text-transform: uppercase;" maxlength="20" name="voucher1" id="voucher1" title="Voucher" class="input" value="" type="text"><span id="voucher1dbpass" style="position: absolute; right: 5%;"><img src="valid.png" width="30" height="30"> </span>
   <span class="vouchererr" id="1">Remove Any Illegal Characters</span>

    <span class="error"></span>
    </div>

<div class="voucher-input second-input">
   Voucher 2: <input style="text-transform: uppercase;" maxlength="20" name="voucher2" id="voucher2" title="Voucher" class="input" value="" type="text"><span id="voucher2dbpass" style="position: absolute; right: 5%;"><img src="invalid.png" width="30" height="30"><br> </span>
   <span class="vouchererr" id="2">Remove Any Illegal Characters</span>

   <span class="error"></span>

背景:我的表单中有许多凭证字段。 AJAX 正在检查数据库以查看提供的优惠券编号是好还是坏。如果表现良好，他们会得到一张支票 (valid.png)。如果不好，他们会得到一个 X (invalid.png)。由于我的 AJAX/PHP 交互方式，img 元素是从单独的 PHP 文件加载的。如果用户从凭证字段中删除其有效或无效条目，我将需要使用 .remove() 函数将其从表单中删除。在正常形式的验证方法中，使用 .hide()/.show() 之类的东西就足够了，但该元素的“原始状态”不存在。

那么，我宁愿只使用某种使用元素模式而不是冗余的“动态”方法，而不是为每个语句执行单独的 IF 语句。

Answer 1

鉴于您的问题描述:

$('input').filter(function () {
    return !this.value.trim().length
}).next('span').find('img').remove();

引用文献:

JavaScript:
• String.prototype.trim() .
• jQuery:
  • filter() .
  • find() .
  • next() .
  • remove() .