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>

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

Answer 1

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

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

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

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

Answer 2

您可以使用jQuery.each()

来解决这个问题

var $x = $('.box');

$x.each(function(i, val) {
  if (i > 0) {
    $(this).remove();
    console.log('deleted '+ (i+1) + '. box');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-attrType="time">
  <div class="box">1.
    <div class="inputBox">
      <div class="input-text-grp">
        <input name="startTime" type="text">
      </div>
    </div>
  </div>
  <div class="box">2.
    <div class="inputBox">
      <div class="input-text-grp">
        <input name="startTime" type="text">
      </div>
    </div>
  </div>
  <div class="box">3.
    <div class="inputBox">
      <div class="input-text-grp">
        <input name="startTime" type="text">
      </div>
    </div>
  </div>
</div>

保留第一个div框并根据搜索模式删除休息

2 个答案: