如何删除一些子 html 元素并遍历父元素以显示剩余元素

Question

我想找到所有可用的 div.finput 父级并遍历它们，然后删除 div.fsetting 子级并保留 div.form-group 元素并将其附加到带有 div.result 的结果包装器中。

我怎样才能做到这一点？

(($) => {
  generateForm()
})(jQuery);

function generateForm() {
  $(document).on('click', '.js-generate', function(e) {
    let elementRows = $('.finput');
    // alert(elementRows.length)
    let html = '';

    $.each(elementRows, function(i, v) {
      html += elementRows.html();
    });

    $('.result').html(html);
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="finput">
  <div class="fsetting">
    <button class="fexpand">edit</button>>
  </div>
  <div class="form-group">
    <input type="text" name="firatname" id="firstname">
  </div>
</div>
<div class="finput">
  <div class="fsetting">
    <button class="fexpand">edit</button>>
  </div>
  <div class="form-group">
    <input type="email" name="email" id="email">
  </div>
</div>

<button class="js-generate">generate</button>
<div class="result"></div>

div.result 中的附加元素应如下所示：

<div class="result">
  <div class="form-group">
    <input type="text" name="firstname" id="firstname">
  </div>
  <div class="form-group">
    <input type="email" name="email" id="email">
  </div>
</div>

Answer 1

要在您的输出示例中创建 HTML，您可以选择 .finput 元素的 .form-group 子元素和 append() 它们到 .result。然后你就可以将remove()原来的.finput元素完全了。

(($) => {
  generateForm()
})(jQuery);

function generateForm() {
  $(document).on('click', '.js-generate', function(e) {
    let $fInputs = $('.finput').remove();
    let $formGroups = $fInputs.children('.form-group');

    $('.result').append($formGroups);
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="finput">
  <div class="fsetting">
    <button class="fexpand">edit</button>
  </div>
  <div class="form-group">
    <input type="text" name="firatname" id="firstname">
  </div>
</div>
<div class="finput">
  <div class="fsetting">
    <button class="fexpand">edit</button>
  </div>
  <div class="form-group">
    <input type="email" name="email" id="email">
  </div>
</div>

<button class="js-generate">generate</button>
<div class="result"></div>

还要注意，您使用的(($) => {})(jQuery) 结构是IIFE，而不是document.ready 事件处理程序。在这种情况下，代码很好，因为您使用的是委托事件处理程序，但是两者之间存在有意义的差异，如果您不知道它可能会导致您出现问题。