刪除表格中的div

Question

在下面的表格中，我試圖刪除整個div addedtrans，然後在按鈕nonpayment附近添加一個按鈕。下面是HTML和問題jQuery的功能：

<form action="tvbill.php" method="GET" name="tvbillform"> 
<table class="persontitle"> 
    <tr> 
     <td> 
      <input type="submit" class="button" id="cancelCable" name="cancelCable" value="Cancel Cable"> 
      <input type="submit" class="button" id="nonpayment" name="nonpayment" value="Non-Payment">     
     </td>  
    </tr> 
</table> 

<div id="addtransaction"> 
    <div class="addedtrans"> 
     <div> 
      <label class="labeltitle">Complete Transaction</label> 
      <input type="submit" value="Complete Transaction" id="completecreditrx" name="completecreditrx" class="buttonlarge buttonmargin"> 
      <input type="button" value="Cancel Transaction" id="cancelcreditrx" name="cancelcreditrx" class="buttonlarge"> 
     </div> 
     <div> 
      <label for="billingdate" class="labeltitle">Transaction Date: 
       <input type="text" id="billingdate" name="billingdate" class="datepick hasDatepicker"> 
      </label> 
     </div> 
     <div> 
      <label for="cabletransamt" class="labeltitle">Transaction Amount 
       <input type="text" id="cabletransamt" name="cabletransamt" class="automoney"> 
      </label> 
     </div> 
     <div> 
      <label for="cabletranstype" class="labeltitle">Transaction Type 
       <select id="cabletranstype" name="cabletranstype"> 
        <option value="7">choice one</option> 
        <option value="10">Credit</option> 
       </select> 
      </label> 
     </div> 
    </div> 
</div> 

$(function(){ 
    $("#cancelcreditrx").click(function(){ 
     var addbutton = $("<input>").attr('type','button').attr('id','addTrx').attr('name','addTrx').attr('value','Add Cable Transaction').addClass("buttonlarge"); 
     $(".addedtrans").remove(); 
     $("#nonpayment").append(addbutton); 
    }) 
}) 

Answer 1

http://jsfiddle.net/billjohnston4/c9rd3jpw/

您正在尋找.after()，.append()只增加了一個父元素，當工作。

$(function() { 
    $("#cancelcreditrx").click(function() { 
     var addbutton = $("<input>", { 
      'type': 'button', 
      'id': 'addTrx', 
      'name': 'addTrx', 
      'value': 'Add Cable Transaction', 
      'class': 'buttonlarge' 
     }); 
     $(".addedtrans").remove(); 
     $("#nonpayment").after(addbutton); 
    }); 
}); 

Answer 2

你不能Add按鈕追加到輸入類型=「提交」。你想把它放在td中嗎？

$("#cancelcreditrx").click(function(){ 
     var addbutton = $("<input>").attr('type','button').attr('id','addTrx').attr('name','addTrx').attr('value','Add Cable Transaction').addClass("buttonlarge"); 
     $(".addedtrans").remove(); 
     $(".persontitle tr td").append(addbutton); 
    }); 

Working Fiddle

Answer 3

你可以使用$(".addedtrans").hide();因爲你不想完全從DOM中刪除。

相反，雖然附加的，你將使用$".addedtrans").show();

Answer 4

我相信這是你所需要的：DEMO

$(function(){ 
    $("#cancelcreditrx").click(function(e){ 
     e.preventDefault(); 
     $(".addedtrans").remove(); 
     $("#nonpayment").after('<input type="button" id="addTrx" name="addTrx" value="Add Cable Transaction" class="buttonlarge">'); 
    }); 
}); 

使用after()可以追加一個元素，選擇集後元素。

Answer 5

要附加到一個按鈕，就可以將其追加到td代替

JS Fiddle

$(".persontitle td").append(addbutton);