{"id":18870,"date":"2022-11-02T05:34:01","date_gmt":"2022-11-02T00:04:01","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/"},"modified":"2022-11-02T05:34:01","modified_gmt":"2022-11-02T00:04:01","slug":"solved-add-and-remove-multiple-tag-by-onclick-to-textarea","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/","title":{"rendered":"[Solved] add and remove multiple tag by onclick to textarea"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

I think I know what you mean, please have a look at this fiddle
\nhttp:\/\/jsfiddle.net\/joevallender\/QyqYW\/1\/<\/a><\/p>\n

The code is below. tags<\/code> would come from the server and selectedTags<\/code> is the managed array of current selections. you could load data from the server into selectedTags<\/code> too if necessary, if for instance editing an existing tagged post. If you did this, you’d refactor the code in the click()<\/code> function out to its own function so it could be run on document ready too. <\/p>\n

I’ve included some class toggling and a debug screen so you can see what is going on.<\/p>\n

HTML<\/p>\n

<textarea id=\"tags\"><\/textarea>\n<div id=\"tagButtons\"><\/div>\n<div id=\"debug\"><\/div>\n<\/code><\/pre>\n
and JavaScript<\/p>\n
var tags = [\n  'JavaScript',    \n  'jQuery',\n  'HTML5',    \n  'CSS3'\n];\n\nvar selectedTags = [];\n\nfor(var i = 0; i < tags.length; i++) {\n  var el = $('<span>').text(tags[i]);\n  $('#tagButtons').append(el);\n}\n\n$('#tagButtons span').click(function(){\n  var val = $(this).text();\n  var index = selectedTags.indexOf(val);\n  if(index > -1) {\n    var removed = selectedTags.splice(index,1); \n    $(this).removeClass('selected');\n    $('#debug').prepend($('<div>').html('Removed: ' + removed));\n  } else {\n    selectedTags.push(val);\n    $(this).addClass('selected');\n    $('#debug').prepend($('<div>').html('Added: ' + val));\n  }\n  $('#tags').val(selectedTags.join(', '));\n});\n<\/code><\/pre>\n
EDIT<\/strong> Here is one that works in both directions http:\/\/jsfiddle.net\/joevallender\/QyqYW\/14\/<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            6<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved add and remove multiple tag by onclick to textarea <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] I think I know what you mean, please have a look at this fiddle http:\/\/jsfiddle.net\/joevallender\/QyqYW\/1\/ The code is below. tags would come from the server and selectedTags is the managed array of current selections. you could load data from the server into selectedTags too if necessary, if for instance editing an existing tagged post. … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333,388],"class_list":["post-18870","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] add and remove multiple tag by onclick to textarea - JassWeb<\/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:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] add and remove multiple tag by onclick to textarea - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] I think I know what you mean, please have a look at this fiddle http:\/\/jsfiddle.net\/joevallender\/QyqYW\/1\/ The code is below. tags would come from the server and selectedTags is the managed array of current selections. you could load data from the server into selectedTags too if necessary, if for instance editing an existing tagged post. ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-02T00:04:01+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\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:\\\/\\\/jassweb.com\\\/solved\\\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] add and remove multiple tag by onclick to textarea\",\"datePublished\":\"2022-11-02T00:04:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\\\/\"},\"wordCount\":138,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\\\/\",\"name\":\"[Solved] add and remove multiple tag by onclick to textarea - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-11-02T00:04:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] add and remove multiple tag by onclick to textarea\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] add and remove multiple tag by onclick to textarea - JassWeb","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:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] add and remove multiple tag by onclick to textarea - JassWeb","og_description":"[ad_1] I think I know what you mean, please have a look at this fiddle http:\/\/jsfiddle.net\/joevallender\/QyqYW\/1\/ The code is below. tags would come from the server and selectedTags is the managed array of current selections. you could load data from the server into selectedTags too if necessary, if for instance editing an existing tagged post. ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/","og_site_name":"JassWeb","article_published_time":"2022-11-02T00:04:01+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] add and remove multiple tag by onclick to textarea","datePublished":"2022-11-02T00:04:01+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/"},"wordCount":138,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/","url":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/","name":"[Solved] add and remove multiple tag by onclick to textarea - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-02T00:04:01+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-add-and-remove-multiple-tag-by-onclick-to-textarea\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] add and remove multiple tag by onclick to textarea"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/18870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=18870"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/18870\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=18870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=18870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=18870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}