CODEWITHSUNDEEP
javascriptjquery
prog1011
prog1011

Reputation: 3495

How to pass `this` as an argument in javascript function?

I am using javascript in my project.

I have on HTML table <table id='idDocList'> and I am doing append some html on this table as below code. But I want to hide respective <tr> when user click on Delete anchor tag.

$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a onclick=deleteDocument(this,'" + file.name + "')> Delete</a></td></tr>");

How can i do this using Jquery?

The following example does not work

function deleteDocument(CurAnchorTag, fileName) {
    $(CurAnchorTag).closest('tr').hide();
}

I don't want to use ID for <a> tag as I have many Documents.

Upvotes: 1

Views: 193

Answers (5)

rneves
rneves

Reputation: 2083

You recommend you to use event for a class using the jquery

$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class='delete_link'> Delete</a></td></tr>");

The code below will add the event and need to execute always after add a "tr", unless you use a delegate to this

$(".delete_link").click(function(){ $(this).closest("tr").hide() });

If you don't want to use a class you can use this

$("#idDocList td > a").click(function(){ $(this).closest("tr").hide() });

Upvotes: 0

Shems Eddine
Shems Eddine

Reputation: 141

you can just use 

$(".delete_link").click(function(){$(this).closest('tr').hide();}

Jquery will use the this of which ever element called it. There will be no need for the onclick on the html file.

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You would better use event delegation and get rid of inline onclick handlers all together:

$('#idDocList').on('click', '.btn-delete', function() {
    $(this).closest('tr').hide();
    // read filename: $(this).data('filename')
});

And use it with HTML (the sting you append):

"<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class="btn-delete" data-filename='" + file.name + "'>Delete</a></td></tr>"

Note the part:

<a class="btn-delete" data-filename="filename">Delete</a>

Upvotes: 0

antyrat
antyrat

Reputation: 27765

I would suggest you to change your code to:

var newRow = $("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a href='#'> Delete</a></td></tr>").appendTo("#idDocList");
newRow.find( 'a' ).click( function( e ) {
    e.preventDefault();
    $( this ).closest('<tr>').hide();
});

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

As a quick fix, you can use like this,

$(CurAnchorTag).closest('tr').hide();

Replaced <tr> with tr

You can remove the inline function call with jquery like this way,

$("#idDocList").on("click", "td a", function() {
    $(this).closest("tr").hide();
    var filename = $(this).closest("td").prev().text();
});

Upvotes: 1

Related Questions