首页html实现点击删除按钮一次删除段落最后一行

html实现点击删除按钮一次删除段落最后一行

时间: 2023-06-10 13:07:31 浏览: 158

可以以下代码实现： ```html <!DOCTYPE html> <html> <head> <title>Delete last line on button click</title> <style> p { margin-bottom: 1em; } </style> </head> <body> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> <button onclick="deleteLastLine()">Delete Last Line</button> <script> function deleteLastLine() { var paragraphs = document.getElementsByTagName("p"); for (var i = 0; i < paragraphs.length; i++) { var lines = paragraphs[i].textContent.split("\n"); if (lines.length > 1) { lines.pop(); paragraphs[i].textContent = lines.join("\n"); break; } } } </script> </body> </html> ``` 这个代码中，我们首先在HTML中创建了两个段落，并在其中添加一些文本。接着，我们创建了一个删除按钮，当用户点击该按钮时，会触发 `deleteLastLine()` 函数。该函数首先获取所有 `p` 元素，并遍历每一个元素。对于每一个元素，它会将文本内容按照换行符分割成多行，然后判断该段落的最后一行是否可以删除。如果可以删除，则将该行从 `lines` 数组中弹出，并使用 `join()` 函数将剩余的行重新组合为一个字符串。最后，将更新后的文本内容赋值回段落元素的 `textContent` 属性中，从而实现删除最后一行的效果。

阅读全文