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

您可以使用$(".addedtrans").hide();，因为您不想将其从DOM中完全删除。

不是追加，而是使用$".addedtrans").show();

Answer 2

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 3

我相信这就是您所需要的： 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 4

您要添加一个按钮，可以将其附加到td而不是

JS Fiddle

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

Answer 5

您无法将addButton附加到输入类型='submit'。你想把它放在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

删除表单中的div

5 个答案: