如何創建另一個函式來洗掉附加的表單？-有解無憂

<script type="text/javascript">
  i=1; 
  function cloneDFLStep(){
    i  ;
    
    var appendThis = '<hr><div id="formId" class="form-group"><label for="fa_title">Step ' i '</label><input type="text" class="form-control" id="fa_title[]" name="fa_title[]"  placeholder="Enter Step Title [' i ']"><br><textarea class="form-control" id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) [' i ']" rows="5"></textarea><br><textarea class="form-control" id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) [' i ']" rows="3"></textarea><hr><input class="minusbtn btn btn-sm btn-warning" type="button" name="removef" value="Delete Step [' i ']"></div>';
    $('.appendRow').append(appendThis);

  }

</script>

每當單擊按鈕時，此代碼都會附加一個新表單。如何創建一個函式來洗掉創建按鈕的新附加表單？幫助

uj5u.com熱心網友回復：

appendThis用包裹你存盤的字串$()，這樣你就有了一組可以操作的 jQuery （未渲染）元素。
將單擊事件系結到minusbtn您創建的洗掉按鈕的類
appendThis洗掉click 事件中所有先前渲染的元素（=> 存盤在中）。

看到這個小提琴： https ://jsfiddle.net/z9d8nphm/

擴展代碼：

<script type="text/javascript">
  i=1; 
  function cloneDFLStep(){
    i  ;
    
    // ATTENTION. STRING WRAPPED HERE: var $appendThis = $(...) 
    var $appendThis = $('<hr><div id="formId" ><label for="fa_title">Step ' i '</label><input type="text"  id="fa_title[]" name="fa_title[]"  placeholder="Enter Step Title [' i ']"><br><textarea  id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) [' i ']" rows="5"></textarea><br><textarea  id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) [' i ']" rows="3"></textarea><hr><input  type="button" name="removef" value="Delete Step [' i ']"></div>' );

    $appendThis.find( '.minusbtn' ).click( function( event ) {

        event.preventDefault();

        $appendThis.remove();
    });

    $('.appendRow').append($appendThis);
  }

</script>

uj5u.com熱心網友回復：

<div class="appendRow"></div>

<button onclick="cloneDFLStep()">cloneDFLStep</button>

<script type="text/javascript">
  i=1; 
  function cloneDFLStep(){
    i  ;
    
    var $appendThis = $('<hr><div id="formId" class="form-group"><label for="fa_title">Step ' i '</label><input type="text" class="form-control" id="fa_title[]" name="fa_title[]"  placeholder="Enter Step Title [' i ']"><br><textarea class="form-control" id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) [' i ']" rows="5"></textarea><br><textarea class="form-control" id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) [' i ']" rows="3"></textarea><hr><input class="btn btn-sm btn-warning" id="removeForm" type="button" name="removef" value="Delete Step [' i ']"></div>' );
    $appendThis.children( '#removeForm' ).click(function(){ 
   $appendThis.remove();
  })
    $('.appendRow').append($appendThis);

  }

</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/418448.html

標籤：

上一篇：根據JavaScript回圈中的陣列元素索引位置從陣列中生成隨機值

下一篇：***尚未宣告（盡管已宣告）