Javascript 无法删除附加的jQuery元素

注意：这看起来与我之前发布的问题类似，但与另一个问题有关

我正在使用Jquery.dotdot，并已通过“阅读更多”成功删除/添加截断

什么问题？

当我单击

“阅读更多”

时，它将展开内容，当我单击

“阅读更少”

时，它将隐藏展开的内容。如果我再次单击

“阅读更多”

，您可以看到

“阅读更少”

链接没有被删除，而是添加了另一个链接（应该这样做）

HTML:

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

/*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>");
});

标题
这里有很长的内容

CSS: （没关系，只是添加到小提琴中以提高可见性）

jQuery:

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

/*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>");
});

/*添加“阅读更多”链接，并在单击“阅读更少”时截断文本*/
$（“.article”）.on（'click'，'.readless'，函数（）{
$（this）.parents（'div'）.eq（0）.dotdot({
省略号：“…”，
总结：“单词”，
回退托莱特：没错，
在：''之后，
手表：错，
身高：100，
公差：10，
最后字符：{
删除：[''，''，''；''，''，''，''！''，''？']，
noEllipsis:[]
}
});
$（'.article'）.find（'.readless'）.remove（）；/*这是不起作用的*/
});
/*截断所有项目*/
$（“[id^=文章]”）.dotdot({
省略号：“…”，
总结：“单词”，
回退托莱特：没错，
在：''之后，
手表：错，
身高：100，
公差：10，
最后字符：{
删除：[''，''，''；''，''，''，''！''，''？']，
noEllipsis:[]
}
});
/*删除截断并将“无读”链接附加到内容*/
$（“.article”）.on（'click'，'.readmore'，函数（）{
$（this）.parents（'div'）.eq（0）.trigger（“destroy”）.append（“”）；
});

---

感谢您的帮助。谢谢。：）

您遇到的问题是因为您首先调用了dotdot插件，然后试图删除免读链接。此时DOM已经被更新，因此链接不再可访问（但它仍然存储在内存中，这就是它后来再次出现的原因）

因此，您需要将链接的删除和插件的调用分开，如下所示：

$(".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: []
        }
    });
});

$（.article”）.on（'click'，'.readless'，函数（）{
var parent=$（this.parents（'div'）.eq（0）；
$（this.remove（）；
parent.dotdot({
省略号：“…”，
总结：“单词”，
回退托莱特：没错，
在：''之后，
手表：错，
身高：100，
公差：10，
最后字符：{
删除：[''，''，''；''，''，''，''！''，''？']，
noEllipsis:[]
}
});
});

感谢您如此精彩的解释和回答！