jHTMLArea: how to remove text partially

Hi all.
I'm building a dashboard for a site, specifically I'm working on a panel to send email.

To compose the message I used jHtmlArea jQuery plugin. To send attachments, instead than fisically sent files I decided to add to the email a link to files, so recipients can download them and the site doesn't use too mutch server resources.
So, on the right I have the jHtmlArea and on the left side I have a list of documents available on the server which can be attached to the email selecting them with checkboxes.

Originally, I had put a button to the bottom to  collect all checked checkboxes and add a link to the email body, but I think it could be nicer adding the elements just clicking the checkboxes: all works fine, but I'm not able to remove the added link if the user uncheck a checkbox previously checked:

	$('#attachmentsList').on('click', ':checkbox', function(){
		$this = $(this);
		var link = "<br><p id='"+$this.attr('name')+"'>Scarica allegato: ";
		link = link + "<a href='"+urldecode($this.attr('value'))+"'>"+$this.attr('name')+"</a></p><br>";
		if ($this.is(':checked'))
		{
			$('#message').htmlarea('html', $('#message').val()+link); //WORKS
		}
		else
		{
			$('#message').htmlarea('html', $('p#'+$(this).attr('name')).remove()); //DOESN'T WORK
		}
	});

Open in new window


To better explain, the not-working code removes from the jHtmlArea everything not only the paragraph I want to remove. What am I doing wrong?

Thanks to all for any advice
Marco
LVL 31
Marco GasiFreelancerAsked:
Who is Participating?
 
Marco GasiFreelancerAuthor Commented:
I found the solution. It's not so direct and clean, but it does the job. First, you have to get the whole content of the textarea. Next, you replace with a blank space the portion of html/text you need to delete; finally you have to call the updateHtmlArea() method to force jHtmlAre to reflect the contents of the underlying textarea.

Here's the code for future readers:

	$('#attachmentsList').on('click', ':checkbox', function(){
		var $this = $(this);
		var name = $this.attr('name');
		var id = name.replace(/\s/g, '_');
		id = $.trim(id);
		var link = "<br><div id='"+id+"'><p >Scarica allegato: ";
		link = link + "<a href='"+urldecode($this.attr('value'))+"'>"+name+"</a></p></div>";
		if ($this.is(':checked'))
		{
			$('#message').htmlarea('html', $('#message').val()+link);
		}
		else
		{
		 	var content = $('#message').attr('value');
			var newcontent = content.replace(link, '');
			$('#message').attr('value', newcontent);
			$('#message').htmlarea('updateHtmlArea');
		}
	});

Open in new window

0
 
leakim971PluritechnicianCommented:
What about :

else {
     var whatToRemove = 'p#' + $(this).attr('name');
     var fromWhereToRemove = "#message";
     $(whatToRemove, fromWhereToRemove).remove();
}

Open in new window

0
 
Marco GasiFreelancerAuthor Commented:
Thanks for your reply, leakim971. Unfortunately, that doesn't work: the added link remains there.
0
 
Marco GasiFreelancerAuthor Commented:
I leave this question open to see if you or someone else can suggest a cleaner solution, then, if no one else post a better solution, I'll close it accepting my own comment.
Have a nice day
0
 
Marco GasiFreelancerAuthor Commented:
Found working solution by myself. Thanks for trying to help me.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.