jQuery的/如何删除一个复选框选中的克隆表？

Question

I'm creating a dynamic form and I want to give the opportunity to delete a selected cloned table to the user. Each table has a checkbox with an unique ID. Here is my code :

    <button class="addOffer">Add Offer</button>
    <button class="delOffer">Delete Offer</button>
        <div id=offer>
        <TABLE id="AC" width="400px" border="0">
              <TR>
                  <TD class="g1">
                  <INPUT type="checkbox" name="chk"/>
                  </TD>
                  <TD class="g1"><SELECT name="ACREG">
                    <OPTION VALUE=""></OPTION>
                    <OPTION VALUE="ACA">ACA</OPTION>
                <OPTION VALUE="ACB">ACB</OPTION>
                </SELECT></TD>
                  <TD class="g1"></TD>
                  <TD align=right class="g1"><INPUT type="button" value="Add Pic" onClick="AddPic" /></TD>
              </TR>
        </TABLE>
        </div>

<script type="text/javascript">
    var i = 1;
    $('.addOffer').click(function() {
        var copy = $('#AC').clone();
        var formId = 'AC' + i;
        copy.attr('id', formId );

        $('#offer').append(copy);
        i++;  
    });
</script>

I'm a bit lost for the part on how the selected checkbox can send to the function his ID when delete offer is clicked.

Your help and suggestions are really appreciate. Regards, poy

Answer 1

you can add a class to the checkbox and on delOffer click remove the closest table of those checked
HTML

<button class="addOffer">Add Offer</button>
<button class="delOffer">Delete Offer</button>
    <div id=offer>
    <TABLE id="AC" width="400px" border="0">
          <TR>
              <TD class="g1">
              <!--add the class to checkbox-->
              <INPUT type="checkbox" name="chk" class="delCheck"/>
              </TD>
              <TD class="g1"><SELECT name="ACREG">
                <OPTION VALUE=""></OPTION>
                <OPTION VALUE="ACA">ACA</OPTION>
            <OPTION VALUE="ACB">ACB</OPTION>
            </SELECT></TD>
              <TD class="g1"></TD>
              <TD align=right class="g1"><INPUT type="button" value="Add Pic" onClick="AddPic" /></TD>
          </TR>
    </TABLE>
    </div>   

JS

$('.delOffer').click(function() {
    $(".delCheck:checked").closest("table").remove();
});    

OR

$('.delOffer').click(function() {
    $(".delCheck").each(function(i,n){
        //you can get the id of the table like $(n).closest("table").attr("id");
        if($(n).get(0).checked==true){//you can add more conditions to delete offer
                $(n).closest("table").remove();
        }
    });
});    

http://jsfiddle.net/bVBcJ/