CODEWITHSUNDEEP
jquery
Monty
Monty

Reputation: 1322

Having trouble with JQuery .closest & .remove

I'm trying to add a button that contains the .closest & .remove into an .append but only the existing button works. I want to be able to click the "New Line" button and have a new line .append and then also be able to "Remove" any of the lines that get added but only the one in that line.

The button 

<button id="addLine">New Line</button>

when clicked adds a new table to the 

<div id="orderForm">

This is what is added

$('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input name="field1" type="text" id="field1" size="25" tabindex="1"></td><td><button id="removeLine">remove()</button></td></tr></table>');

Thats fine and working. I've also added 

$("#removeLine").click(function () {
 $('#removeLine').closest('.orderLine').remove();
});

BUT it only works on the first line that was existing.

Here is the full code.

<html>
<head>
<?php include '../_includes/jq.inc.php';?><br>
</head>
<body>

<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><input name="field1" type="text" id="field1" size="25" tabindex="1"></td>
        <td><button id="removeLine">remove()</button></td>
    </tr>
</table>
</div>

</body>

<script type="text/javascript">

$("#removeLine").click(function () {
 $('#removeLine').closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input name="field1" type="text" id="field1" size="25" tabindex="1"></td><td><button id="removeLine">remove()</button></td></tr></table>');
    });

</script>
</html>

I've checked it over and checked it over and I have no idea what I'm doing wrong. Does anyone have any ideas on this?

Upvotes: 1

Views: 10069

Answers (3)

aziz punjani
aziz punjani

Reputation: 25776

Use .live or .delegate to attache event handlers to elements that are not present in the DOM at the time the events are bound.

Upvotes: 2

Dennis
Dennis

Reputation: 32608

No two elements can have the same id - use classes and event delegation:

HTML: 

<button class="removeLine">remove()</button>

JS:

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

Delegation lets you listen to events triggered by elements that have not yet been added to the document. In this case, it attaches a handler to orderForm that listens to click events triggered on .removeLine elements that either currently exist or will be added in the future.

Upvotes: 4

Daan Poron
Daan Poron

Reputation: 2758

you should take a look at the jQuery.live in stead of the jQuery.click. jQuery.click will only bind once (in your case only the initial remove buttons), while jQuery.live will also bind new elements which match the selector. Also i think it's better to use a class for your remove button, because you have more then one remove button so an id isn't valid html. You can only have one DOM element with the same ID. But you can have more DOM elements with the same class.

$('.removeButton').live('click' function() {
  $(this).closest('.orderLine').remove();
});

Upvotes: 0

Related Questions