Cannot remove appended jQuery Element

Question

NOTE: This looks similar to a previous question I have posted, but is about another issue.

I'm using Jquery.dotdotdot and have managed to remove/add truncation with a Read More,

What is the issue?

When I click "Read More" it will expand the content, when I click "Read Less" it will hide the expanded content. If I click "Read More" again you can see that that the "Read Less" link was not removed and it has added another one (which it should be doing).

JSFiddle:

Live Website:

HTML:

<div class='article'>
<div class='articleheader'>Title</div>
<div id='article_$count' class='articlecontent'>
    <p>long content goes here
    </p>
</div>
</div>

CSS: (Doesn't matter, just added to fiddle for improved visibility)

jQuery:

/*Adds the "Read More" link and truncates the text when clicking read Less. */
$(".article").on('click', '.readless', function () {
$(this).parents('div').eq(0).dotdotdot({
    ellipsis: '... ',
    wrap: 'word',
    fallbackToLetter: true,
    after: '<a href="#" class="readmore">Read more &raquo;</a>',
    watch: false,
    height: 100,
    tolerance: 10,
    lastCharacter: {
        remove: [' ', ',', ';', '.', '!', '?'],
        noEllipsis: []
    }
});
$('.article').find('.readless').remove(); /*THIS IS WHAT DOESN'T WORK*/
});

/*Truncates all articles */
$("[id^=article]").dotdotdot({
ellipsis: '... ',
wrap: 'word',
fallbackToLetter: true,
after: '<a href="#" class="readmore">Read more &raquo;</a>',
watch: false,
height: 100,
tolerance: 10,
lastCharacter: {
    remove: [' ', ',', ';', '.', '!', '?'],
    noEllipsis: []
}
});


/*removes truncation and appends "Read Less" link to content*/
$(".article").on('click', '.readmore', function () {
$(this).parents('div').eq(0).trigger("destroy").append("<a href='#' class='readless'>Read Less &raquo;</a>");
});

Any help is appreciated. Thanks. :)

Answer 1

The problem you had was caused by the fact you first called the dotdotdot plugin and then tried to remove the read less link. At that point the DOM had already been updated and hence the link was no longer accessible (but it was still stored in memory, which is why it showed up again afterwards).

Therefore you need to split up the deletion of the link and the calling of the plugin, like so:

$(".article").on('click', '.readless', function () {
    var parent = $(this).parents('div').eq(0);
    $(this).remove(); 
    parent.dotdotdot({
        ellipsis: '... ',
        wrap: 'word',
        fallbackToLetter: true,
        after: '<a href="#" class="readmore">Read more &raquo;</a>',
        watch: false,
        height: 100,
        tolerance: 10,
        lastCharacter: {
            remove: [' ', ',', ';', '.', '!', '?'],
            noEllipsis: []
        }
    });
});