在前端开发中，我们常常需要通过用户输入来实现动态添加和删除某些元素的功能。本文将介绍使用jQuery实现动态添加、删除评论的方法。
实现动态添加评论
要实现动态添加评论的功能，我们首先需要一个表单用于用户输入评论内容，并且通过jQuery监听表单提交事件。接下来是具体的代码实现：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ---------------------- -------- ------------------------------------------------------------------ ------- ------ ---------------- ------ ------------------ -------- ---------------------- -------- ----------- --------- ------------ ------ -------- --------------------------- ----------- ------------ -------------------------- ------ --------- --------------------------- -------- ---- ------------------ ------ ---- --- ------ --------- -------------- - -------------------------------------------- - --------------------------- -- ---------- ------- ---- - ----------------- ------- ------- - -------------------- ------ ------ -- --------- - ------------------------- ------------ ----- ------- ---- - --------- - ------- - ------------ - ---- - --------------- ------------------------------------ ----------------------- -------------------------- ------ ----- ---------- ------- -------
代码中的核心部分是表单提交事件监听函数，它首先阻止了表单的默认提交行为（即刷新页面），然后获取用户输入的姓名和评论内容。如果姓名或评论内容为空，则弹出提示框。最后，将姓名和评论内容拼成HTML字符串，通过jQuery的append()方法将其添加到评论列表中。
实现动态删除评论
实现动态删除评论的功能，我们需要在每个评论元素中添加一个删除按钮，并且通过jQuery监听该按钮的点击事件，在点击时删除该评论元素。具体的代码实现如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ------------------------ -------- ------------------------------------------------------------------ ------- ------ ------------------ ------ ------------------ -------- ---------------------- -------- ----------- --------- ------------ ------ -------- --------------------------- ----------- ------------ -------------------------- ------ --------- --------------------------- -------- ---- ------------------ ------ ---- --- ------ --------- -------------- - -------------------------------------------- - --------------------------- -- ---------- ------- ---- - ----------------- ------- ------- - -------------------- ------ ------ -- --------- - ------------------------- ------------ ----- ------- ---- - --------- - ------- - ------------ - ---- - --------------- --------------------------------- ------------------------------------ ----------------------- -------------------------- ------ --------------------------------- ---------- ---------- - ------------------------------ ------ ----- ---------- ------- -------
代码中新增了一个“删除”按钮，它的点击事件通过jQuery的on()方法委托给了评论列表上级元素，这样在添加新评论时就无需重复绑定事件。当用户点击“删除”按钮时，首先获取该按钮的父级评论元素（
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3039