如何刪除一些子 html 元素並通過父元素循環顯示剩余元素

Question

我想找到所有可用div.finput父級並遍歷它們，然后刪除div.fsetting子級並將div.form-group元素和 append 保留到帶有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

要在 output 示例中創建 HTML，您可以 select .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事件處理程序。 在這種情況下，代碼很好，因為您使用的是委托事件處理程序，但是兩者之間存在有意義的差異，如果您不知道它可能會導致您出現問題。