Emil Andersson Emil Andersson - 22 days ago 11
HTML Question

cloning HTML and render it with custom text

I'm trying to get the value of tb-team-name a when clicking .tb-delete-team a but for some reason it renders like "Are you sure you want to delete [object Object]?"

When I do $('.hutdb-modal-body').html(nameOutput); it shows the link as it should do. What am I doing wrong? (I'm not very good at jQuery)

HTML

<tr role="row" class="odd">

<td width="80%;" class="row-label tb-team-name bold"><a href="/17/builder/12037">Goon Squad</a></td>
<td class="tb-synergy">3</td>
<td class="tb-team-overall">86.05</td>
<td class="tb-delete-team"><a class="table-button" href="/s/builder/del/12037"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></td>

</tr>


jQuery

$('.tb-delete-team a').click(function(event) {

event.preventDefault();

var addressValue = $(this).attr('href');

var nameValue = $(this).parent('#my_teams_wrapper table tbody tr td').parent('#my_teams_wrapper table tbody tr').children('.tb-team-name').children('a');
var nameOutput = nameValue.clone().val('.tb-team-name');

$(this).each(function () {
$('.hutdb-overlay').show();
$('.hutdb-modal').fadeIn();

$('.hutdb-modal-body').html('Are you sure you want to delete ' + nameOutput + '?');

$('.hutdb-modal-button-group').html( '<a class="cancel" href="#">Cancel</a><a class="confirm" href="'+addressValue+'"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>' );
$('.hutdb-modal-button-group .cancel').click(function() {
$('.hutdb-modal').hide();
$('.hutdb-overlay').hide();
});
});

});

Answer

Try Using below for nameValue:

var nameValue = $(this).closest('tr').find('.tb-team-name').text();

closest matches and returns the first parent selector in the DOM. See documentation

The above code first traverse up in the DOM till it meets the first tr (its parent) and then traverse down into the matched tr and finds .tb-team-name and retrieves its value (or the text of the <a> tag).

You may not need nameOutput after that.

Comments