javascript - 保留第一个 div 框并根据搜索模式删除其余部分

Question

<div data-attrType="time">
    <div class="box">
        <div class="inputBox">
            <div class="input-text-grp">
                <input name="startTime" type="text">
            </div>
        </div>
    </div>
    <div class="box">
        <div class="inputBox">
            <div class="input-text-grp">
                <input name="startTime" type="text">
            </div>
        </div>
    </div>
    <div class="box">
        <div class="inputBox">
            <div class="input-text-grp">
                <input name="startTime" type="text">
            </div>
        </div>
    </div>
</div>

现在我将 div 存储在 Jquery 变量 $x 中。如果我执行 $x.find('.box')，我将得到 3 个盒子。我想做的是仅保留第一个框并删除其余框并将第一个框中的文本设置为空。因此生成的 div 结构应该如下所示:

<div data-attrType="time">
    <div class="box">
        <div class="inputBox">
            <div class="input-text-grp">
                <input name="startTime" type="text" value="">
            </div>
        </div>
    </div>
</div>

我尝试使用拼接方法，但是，它并没有删除剩余的框。

Answer 1

选择第一个框之后的所有下一个框并删除它们...

$x.find('.box:eq(0)').nextAll(".box").remove();

要重置输入值，您可以使用

$x.find('.box:eq(0) input').val("");