JQuery remove() does not remove an element

Question

I did a form for adding and removing two fields of text (input text and select). Adding works perfectly, but remove() does not.

Here is a template-form with all necessary elements, which are going to be added by function addRow():

<div class="container-fluid" >
<div class="row data-container">
    <div class="col-md-1 col-sm-1"></div>
        <div class="col-md-10 col-sm-10">
            <div class="col-md-3 col-sm-3">
                text
            </div>
                <div class="col-md-9 col-sm-9">
                <div id="itemRows">
                    <div class="col-xs-5">
                        <input type="text" class="input-txt" placeholder="Heli Kopter">
                    </div>
                    <div class="col-xs-5">
                        <select class="input-txt">
                              <option>Projektijuht</option>
                              <option>Kujundaja</option>
                              <option>Arendaja</option>
                        </select>
                    </div>
                    <div class="col-xs-2"></div>
                </div>
                </div>  
        </div> <!-- /.col-md-10 col-sm-10 -->
    <div class="col-md-1 col-sm-1"></div>
</div>

Here is a template where I would like to add elements. Just after class col-md9 col-sm-9:

<div class="container-fluid" >
<div class="row data-container">
    <div class="col-md-1 col-sm-1"></div>
        <div class="col-md-10 col-sm-10">
            <div class="col-md-3 col-sm-3">
                text
            </div>
                <div class="col-md-9 col-sm-9">
                    <input onclick="addRow(this.form);" type="button" value="Add row" />
                </div>
        </div>
    <div class="col-md-1 col-sm-1"></div>
</div>

This is the jquery source. addRow works great, but remove function does not work:

    var rowNum = 0;

    function addRow(frm) {
        rowNum++;
        var row = '<p id="rowNum' + rowNum + '"><div class="col-xs-5" style="background-color:red;"><input type="text" class="input-txt" placeholder="Heli Kopter"></div><div class="col-xs-5" style="background-color:yellow;"><select class="input-txt"><option>Projektijuht</option><option>Kujundaja</option><option>Arendaja</option></select></div><div class="col-xs-2" style="background-color:red;"><input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"/></div> </p>';
        jQuery('#itemRows').append(row);
        frm.add_qty.value = '';
        frm.add_name.value = '';
    }

    function removeRow(rnum) {
        /* $("p:last-child").remove(); */
        jQuery('#rowNum' + rnum).remove();
    }

Could you please help me to repair it? Thank you!

Answer 1

Change the addRow function to:

function addRow(frm) {
    rowNum++;
    var row = '<div id="rowNum' + rowNum + '"><div class="col-xs-5" style="background-color:red;"><input type="text" class="input-txt" placeholder="Heli Kopter"></div><div class="col-xs-5" style="background-color:yellow;"><select class="input-txt"><option>Projektijuht</option><option>Kujundaja</option><option>Arendaja</option></select></div><div class="col-xs-2" style="background-color:red;"><input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"/></div> </div>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
}

The problem is as mentioned in a comment that a <p> can't wrap a <div>, so the <p> get's closed immediatly. Here is a fiddle: http://jsfiddle.net/M4U5F/