Remove Parent

[Szabi Zsoldos]

Hi guys,

I'm trying to work on a form with jquery.

I have a table with 9 cells, 9 inputs and 9 delete links.
I want to delete de particular cell on which i've clicked delete, but cannot figure it out how.

I am able to delete the first element with value="1" but not the rest.

<table cellspacing="50">
    <tr>
        <td><input type="text" name="arr[]" value="1"><a id="del">Delete</a></td>
        <td><input type="text" name="arr[]" value="2"><a id="del">Delete</a></td>
        <td><input type="text" name="arr[]" value="3"><a id="del">Delete</a></td>
        </tr>
    <tr>
        <td><input type="text" name="arr[]" value="4"><a id="del">Delete</a></td>
        <td><input type="text" name="arr[]" value="5"><a id="del">Delete</a></td>
        <td><input type="text" name="arr[]" value="6"><a id="del">Delete</a></td>
    </tr>
    <tr>
        <td><input type="text" name="arr[]" value="7"><a id="del">Delete</a></td>
        <td><input type="text" name="arr[]" value="8"><a id="del">Delete</a></td>
        <td><input type="text" name="arr[]" value="9"><a id="del">Delete</a></td>
    </tr>
</table>



jQuery(document).ready(function(){
    $('td').hover(function(){
        $(this).css("background-color","#E88914");
        $(this).fadeOut(500);
        $(this).fadeIn(function(){
            $(this).css("background-color","#FFF");
        });
    });
    $('#del').click(function(){
        $(this).parent('td').remove();
    })
});

[Airshow]

The problem lies in having multiple id="del".

Ids must be unique, so use class="del" instead, and adjust the jQuery selector accordingly.

[IIM]

Set unique id of each td

<td><input type="text" name="arr[]" value="1" id="name1"><a id="del">Delete</a></td>

and then remove by ID

var id = $(this).attr('id');
$($(this).attr('id')).remove();

[Szabi Zsoldos]

Airshow, I'm just starting jQuery, could you explain in more detail please ? :)

    $('.del').click(function(){
        $(this).parent('td').remove();
    });

I did got it work but what is the difference between the ID and the CLASS in this way that it works ?

Thank you!

[Airshow]

Szabizs,

Ids are designed to be unique whilst classes are designed to be multiple.

With an expression such as $("#myId"), jQuery will select only the first matching element.

With an expression such as $(".myClass"), jQuery will select all matching elements.

This is a feature of the DOM and javascript, to which jQuery has no option but to conform.

[Szabi Zsoldos]

I understand :)

Thank you for the helping hand!