{"id":28508,"date":"2024-03-16T10:27:22","date_gmt":"2024-03-16T10:27:22","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/"},"modified":"2024-03-22T13:37:36","modified_gmt":"2024-03-22T13:37:36","slug":"how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/","title":{"rendered":"How to delete the line where the cursor is located in a textarea?"},"content":{"rendered":"<p>To delete the line where the cursor is located in the textarea, you can follow these steps:<\/p>\n<ol>\n<li>Retrieve the text content from a textarea.<\/li>\n<li>Get the position of the cursor.<\/li>\n<li>Use regular expressions to delete the content of the current line where the cursor is located.<\/li>\n<li>Reset the updated text content back into the textarea.<\/li>\n<\/ol>\n<p>Below is a sample code demonstrating how to achieve this functionality.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"myTextarea\"<\/span> <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\">\"4\"<\/span> <span class=\"hljs-attr\">cols<\/span>=<span class=\"hljs-string\">\"50\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textarea<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"deleteCurrentLine()\"<\/span>&gt;<\/span>\u5220\u9664\u5f53\u524d\u884c<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\r\n\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"language-javascript\">\r\n    <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">deleteCurrentLine<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n      <span class=\"hljs-comment\">\/\/ \u83b7\u53d6textarea\u5143\u7d20<\/span>\r\n      <span class=\"hljs-keyword\">var<\/span> textarea = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"myTextarea\"<\/span>);\r\n\r\n      <span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u6587\u672c\u5185\u5bb9<\/span>\r\n      <span class=\"hljs-keyword\">var<\/span> content = textarea.<span class=\"hljs-property\">value<\/span>;\r\n\r\n      <span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u5149\u6807\u7684\u4f4d\u7f6e\uff08\u8d77\u59cb\u548c\u7ed3\u675f\u4f4d\u7f6e\uff09<\/span>\r\n      <span class=\"hljs-keyword\">var<\/span> startPos = textarea.<span class=\"hljs-property\">selectionStart<\/span>;\r\n      <span class=\"hljs-keyword\">var<\/span> endPos = textarea.<span class=\"hljs-property\">selectionEnd<\/span>;\r\n\r\n      <span class=\"hljs-comment\">\/\/ \u6839\u636e\u5149\u6807\u4f4d\u7f6e\u627e\u5230\u5149\u6807\u6240\u5728\u884c\u7684\u8d77\u59cb\u548c\u7ed3\u675f\u4f4d\u7f6e<\/span>\r\n      <span class=\"hljs-keyword\">var<\/span> startLinePos = content.<span class=\"hljs-title function_\">lastIndexOf<\/span>(<span class=\"hljs-string\">\"\\n\"<\/span>, startPos - <span class=\"hljs-number\">1<\/span>) + <span class=\"hljs-number\">1<\/span>;\r\n      <span class=\"hljs-keyword\">var<\/span> endLinePos = content.<span class=\"hljs-title function_\">indexOf<\/span>(<span class=\"hljs-string\">\"\\n\"<\/span>, endPos);\r\n\r\n      <span class=\"hljs-comment\">\/\/ \u5220\u9664\u5149\u6807\u6240\u5728\u884c\u7684\u5185\u5bb9<\/span>\r\n      <span class=\"hljs-keyword\">var<\/span> updatedContent = content.<span class=\"hljs-title function_\">slice<\/span>(<span class=\"hljs-number\">0<\/span>, startLinePos) + content.<span class=\"hljs-title function_\">slice<\/span>(endLinePos);\r\n\r\n      <span class=\"hljs-comment\">\/\/ \u66f4\u65b0textarea\u4e2d\u7684\u6587\u672c\u5185\u5bb9<\/span>\r\n      textarea.<span class=\"hljs-property\">value<\/span> = updatedContent;\r\n    }\r\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>In the example above, we first get the textarea element and its text content. Then, we use the selectionStart and selectionEnd properties to get the starting and ending positions of the cursor. Next, we use the lastIndexOf and indexOf methods to find the starting and ending positions of the line where the cursor is located. Finally, we use the slice method to delete the content of the line where the cursor is, and then we set the updated text content back into the textarea.<\/p>\n<p>Please note that this example can only delete the line where the cursor is located. If the cursor has selected multiple lines of text, only the first line will be deleted. If you want to be able to handle multi-line deletion, modify the code to suit your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To delete the line where the cursor is located in the textarea, you can follow these steps: Retrieve the text content from a textarea. Get the position of the cursor. Use regular expressions to delete the content of the current line where the cursor is located. Reset the updated text content back into the textarea. [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-28508","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to delete the line where the cursor is located in a textarea? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to delete the line where the cursor is located in a textarea?\" \/>\n<meta property=\"og:description\" content=\"To delete the line where the cursor is located in the textarea, you can follow these steps: Retrieve the text content from a textarea. Get the position of the cursor. Use regular expressions to delete the content of the current line where the cursor is located. Reset the updated text content back into the textarea. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T10:27:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T13:37:36+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noah Thompson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"How to delete the line where the cursor is located in a textarea?\",\"datePublished\":\"2024-03-16T10:27:22+00:00\",\"dateModified\":\"2024-03-22T13:37:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/\"},\"wordCount\":211,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/\",\"name\":\"How to delete the line where the cursor is located in a textarea? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T10:27:22+00:00\",\"dateModified\":\"2024-03-22T13:37:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to delete the line where the cursor is located in a textarea?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to delete the line where the cursor is located in a textarea? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/","og_locale":"en_US","og_type":"article","og_title":"How to delete the line where the cursor is located in a textarea?","og_description":"To delete the line where the cursor is located in the textarea, you can follow these steps: Retrieve the text content from a textarea. Get the position of the cursor. Use regular expressions to delete the content of the current line where the cursor is located. Reset the updated text content back into the textarea. [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T10:27:22+00:00","article_modified_time":"2024-03-22T13:37:36+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"How to delete the line where the cursor is located in a textarea?","datePublished":"2024-03-16T10:27:22+00:00","dateModified":"2024-03-22T13:37:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/"},"wordCount":211,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/","name":"How to delete the line where the cursor is located in a textarea? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T10:27:22+00:00","dateModified":"2024-03-22T13:37:36+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-delete-the-line-where-the-cursor-is-located-in-a-textarea\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to delete the line where the cursor is located in a textarea?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/28508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=28508"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/28508\/revisions"}],"predecessor-version":[{"id":62810,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/28508\/revisions\/62810"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=28508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=28508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=28508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}