How to stop jQuery .remove in function with .live to refresh the page?

Question

UPDATE

I am using jQuery 1.10.1... so .live is depreciated... I just replaced

$("table.dynatable button.remove").live('click', function (e) { 
$(this).parents("tr").remove();
});

with

$(document).on("click", "table.dynatable button.remove", function() { 
$(this).parents("tr").remove(); 
});

And now it works, hope this helps someone.

---

I have this jQuery working with php and html form:

my php:

foreach ($matric_type as $row) {
$matric_type = $row->matric_type;
}

This populates a dropdown depending on the type of matric(grade 12) certification you have. each matric cerification has a list of different subjects being populated in another dropdown.

my jQuery:

$(document).ready(function () {

    var id = 0;
    event.preventDefault();

    // Add button functionality
    $("table.dynatable button.add").click(function (e) {
        e.preventDefault();
        id++;
        var master = $(this).parents("table.dynatable");

        // Get a new row based on the prototype row
        var prot = master.find(".prototype").clone();
        prot.attr("class", "")
        prot.find(".id").attr("value", id);

        master.find("tbody").append(prot);
    });

    // Remove button functionality
    $("table.dynatable button.remove").live('click', function (e) { // this might be the problem?
        //e.preventDefault();           //this does not work
        // e.stopImmediatePropagation(); //this does not work
        // e.stopPropagation();          //this does not work
        $(this).parents("tr").remove();
        //$(this).closest('.prototype').remove()
        // $(this).parent().parent().remove();         
    });
});

html:

 <table class="dynatable">
                            <thead>
                                <tr>
                                    <th>Subject No</th>
                                    <th>Subject</th>
                                    <th>Mark</th>
                                    <th><button class="add">Add</button></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="prototype">
                                    <td><input type="input" name="id[]" value="0" class="id" readonly /></td>
                                    <td><select id="list"></select></td>
                                    <td><input type="text" name="mark[]" value="" /></td>
                                    <td><button class="remove">Remove</button>
                                </tr>
                        </table>

This jQuery uses the add button to add a row with the subject number, a dropdown with subjects, a text field to enter marks for that subject. I can add just fine.. The problem comes with the remove button.. each time I click the remove button it refreshes the page, and adds

?id%5B%5D=0&mark%5B%5D=&id%5B%5D=1&mark%5B%5D=

to the url. The more "subjects" I add the longer the above gets eg. if I add 2 subjects

?id%5B%5D=0&mark%5B%5D=&id%5B%5D=1&mark%5B%5D=&id%5B%5D=2&mark%5B%5D=

I have tried adding to the remove function:

e.preventDefault();           
e.stopImmediatePropagation(); 
e.stopPropagation(); 

But it still reloads the page, removing all subject rows instead of just the one that is clicked. Can someone please help by giving a possible solution to my problem?

Answer 1

add the type=button to your button, otherwise button acts like a submit button

<button class="remove" type='button'>Remove</button>