Unable to remove an element from dynamic jquery form - javascript

I am creating a dynamic form with a wysiwig editor nice editor which goes like this.
Scripts needed
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
Html
<div id="p_scents">
<p>
<input type="text" name="title">
<textarea name="description[]" rows="20" cols="80"></textarea>
</p>
</div>
And the jquery function
$(function () {
var editors = {}; //Keep track of all added nicEditors for removal later
var scntDiv = $('#p_scents');
$(document).on('click', '#addScnt', function () {
var elm = $('<div class="con"><input type="text" id="Text1" value="" /></div>').appendTo(scntDiv);
var elm = $('<textarea NAME="description[]"></textarea>').appendTo(scntDiv); // Add the textarea to DOM
var curSize = $('textarea[name="description[]"]').length; //Get the current SIZE of textArea
editors[curSize] = new nicEditor().panelInstance(elm[0]); //Set the Object with the index as key and reference for removel
elm.after($('<a/>', { //Create anchor Tag with rel attribute as that of the index of corresponding editor
rel: curSize,
'class': "remScnt",
text: "Remove",
href: '#'
})).next().andSelf().wrapAll($('<p/>')); //add it to DOM and wrap this and the textarea in p
});
$(document).on('click', '.remScnt', function (e) {
e.preventDefault();
var elem = $(this).prev('textarea'); //Get the textarea of the respective anchor
var index = this.rel; //get the key from rel attribute of the anchor
editors[index].removeInstance(elem[0]); //Use it to get the instace and remove
delete editors[index]; //delete the property from object
$(this).closest('con').remove();
$(this).closest('p').remove(); //remove the element.
});
});
This script is taken from this stack overflow question.
NicEdit html editor for managing dynamic add/remove textareas
With this scrip i want to attach a text field as title the above script is creating the same but once it is created if i press on remove button it is not getting removed only the text area is getting removed where am i going wrong how can i fix this?
Updated fiddle is here http://jsfiddle.net/eEUEW/34/

you can use .parent() and .prev()
replace
$(this).closest('con').remove();
$(this).closest('p').remove();
with
$(this).parent().prev().remove();
$(this).closest('p').remove();

Related

Jquery Remove Element from List

I have a list in JQuery that's called additionalInfo, which is filled in using this JQuery function:
$('#append').on('click', function () {
//check if the following area is valid before moving on, check the jquery validation library
var text = $('#new-email').val();
var li = '<li>' + text + 'input type="hidden" name="additionalInfo" value="'+text+'"/> </li>';
$('#additional-info-list').append(li);
$('#new-email').val('');
});
The point of the function is not only to store the info in a list that can be used later, but also to render a <li> with the info text in it. Right now I have another button on each <li> that when pressed, makes the li vanish, but I also need to add code to it that completely removes the info text from the additionalInfo list. This is the code I have for that method so far:
$('#removeEmail').on('click', 'li>.remove-btn', function (event){
$(event.currentTarget).closest('li').remove();
});
How can I get the segment of info text out of the li and then remove it from additionalInfo?
You have few problems. First of all when you create the new items, your markup is not correct. You were missing the opening bracket of input tag. Also i changed the code for delete so that it listens for the click event on any item with class remove-btn under the li element. This should delete the item when you click the remove link inside the li.
$(function(){
$('#append').on('click', function () {
var text = $('#new-email').val();
var li = '<li>' + text + '<input type="hidden" name="additionalInfo"
value="'+text+'"/>
<a href="#" class="remove-btn" >remove</a></li>';
$('#additional-info-list').append(li);
$('#new-email').val('');
});
$(document).on('click', 'li>.remove-btn', function (event){
var _this =$(this);
_this.closest('li').remove();
});
});
Here is a working jsfiddle

Transform input back into a div on button click

I am using the following code
$(document).on('click', '#editDetailBtn', function () {
var input = $('<input id="#detailprimaryDescription" type="text" />');
input.val($('#detailprimaryDescription').text());
$('#detailprimaryDescription').replaceWith(input);
$('#editDetailBtn').hide();
$('#detailPrimaryCancel').show();
$('#detailPrimarySave').show();
});
$(document).on('click', '#detailPrimaryCancel', function () {
var input = $('<div id="#detailprimaryDescription" ></div>');
//input.val($('#detailprimaryDescription').text());
$('#detailprimaryDescription').replaceWith(input);
$('#editDetailBtn').show();
$('#detailPrimaryCancel').hide();
$('#detailPrimarySave').hide();
});
what I am trying to achieve is to once cancel is clicked then it will turne the input field back into a div
http://jsfiddle.net/7XWAu/
I think this is what you're shooting for.
JS FIDDLE
you don't need to place '#' at the beginning of an id in the dom, its only used to reference elements.
so basically, every where you had something like:
var input = $('<input id="#detailprimaryDescription_input" type="text" />');
you shouuld be doing something like:
var input = $('<input id="detailprimaryDescription_input" type="text" />');
once I cleaned that up it worked as it does in the fiddle.
I do want to say, that it would be a muchhhhhhh better practice to just show and hide a div containing all those inputs rather than manipulating the DOM to create / destroy them constantly.

find id of element which caused input blur

I need to find the element clicked which causes a text input to blur and store it as a variable. how can I determine the id of the element that was clicked to cause the input 'textBox' to lose focus? I don't know if I am approaching this the right way, but this code below is what I have so far. I tried document.activeElement, but it only worked on inputs and not elements such as li's and anchor tags Thanks
javascript:
var elClicked;
$('textBox').blur(function(){
elClicked = // what is the id of the element that caused blur?
alert(elClicked);
});
html:
<input type = "text" id = "textBox">
<!-- example elements -->
<input type = button id = "element1" />
text
<ul><li id = "element3">list</li></ul>
By accessing the id property of the target.
$('textBox').blur(function(){
var target = event.explicitOriginalTarget || document.activeElement;
elClicked = target ;
alert(elClicked);
});
alternatively you could try an approach along these lines
var elClicked;
$(document).mousedown(function(e) {
elClicked = $(e.target);
});
$('textBox').blur(function(){
alert(elClicked);
});
You can store the id of anchor tag in a hidden field ,When it is clicked.And takeing that value you can find which element is clicked

RemoveChild does not work

I have a problem with the use of the javascript removeChild function.
Here's my script:
////function to add element by ID////
var i=1;
$("#buttonAdd").live('click',function() {
$("#list1 li:last-child").parent().append('<li>'+
'<label for=njajal[]>njajal'+
'<textarea class="tinymce" name="njajal[]" id="aaa'+i+'"></textarea>'+
'<span><a class="delIt" id="'+i+'"><b>Hapus</a></span></label>'+
'</li>');
tinyMCE.execCommand('mceAddControl', false, 'aaa'+i);
console.log('add '+i);
i++;
});
////Function to delete element by ID/////
function delIt(eleId)
{
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('njajal');
parentEle.removeChild(ele);
}
What is the problem?
Here's the HTML code:
<div id="form">
<form method="post" action="">
<fieldset>
<ol id="list1">
<li>
<label for="njajal[]">njajal
<textarea name="njajal[]" class="tinymce" ></textarea>
</label>
</li>
</ol>
<div id="addOpt">
<a id="buttonAdd" class="bt"><b>Tambah</a>
</div>
</fieldset>
</form>
</div>
Screnshot:
You use jQuery in your first function, so the easiest way to remove that element would be with jQuery:
$('#myElementID').remove();
Here's how you can accomplish the same thing with plain javascript:
var myElement = document.getElementById('myElementID');
myElement.parentNode.removeChild(myElement);
EDIT:
To make things simpler read > as "child of:
From what I can tell the problem is thattextarea > label > li > ol. The only element actually having an id is <ol> so to remove the label (as you show in the image) change delIt to:
function deleteLabelTextArea(){
var elementRemove = document.getElementById("list1").firstElementChild.firstElementChild;
elementRemove.parentNode.removeChild(elementRemove);
}
Old Answer:
As we cannot see the HTML I am not certain what the problem is other than as Marc B has mentioned that 'njajal' is not the parent of eleID. To fix that I would recommend:
function delIt(eleId){
var ele = document.getElementById(eleId);
ele.parentNode.removeChild(ele);
}
The solutions presented till now won't work because tinymce IS NOT the textarea!!
Tinymce gets initialized using the content of a specified html-element - a textarea in this case. After initialization an iframe with a contenteditable body is created where users may edit html content.
In order to get rid of the tinymce editor you need to shut it down first:
tinymce.execCommand('mceRemoveControl', false, 'content'); // your textarea got no id, then tinymce uses 'content' as default editor id
Second, you may remove the initial html elements like label and textarea as the other solutions to your question show.
I just wonder why you have have two tinymce editors on your page?
For me it looks like you might prefer to initialize just one them instead of removing the second one afterwards.

how to get tinyMCE editable for a cloned textarea by cloneNode(true) function

When I try to clone a textarea by using cloneNote(true), the cloned textarea is not editable. Does anyone know how to resolve the problem? The sample codes show as following:
<html>
<head>
<script type="text/javascript" src="/javascripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
});
</script>
<script type="text/javascript">
testclonenode = {
addAbove : function (element) {
var rowEl = element.parentNode.parentNode.parentNode;
var rowElClone = rowEl.cloneNode(true);
rowEl.parentNode.insertBefore(rowElClone, rowEl);
return false;
}
};
</script>
</head>
<body>
<table>
<tr><td>
<textarea name="content" style="width:100%">this is a test </textarea>
<p> <button onclick='return testclonenode.addAbove.call(testclonenode, this);'> Add above </button>
</td></tr>
</table>
</body></html>
It does not work that way. Also, it is impossible to move a tinymce editor using dom manipulation.
The tinymce wiki states the following:
mceAddControl
Converts the specified textarea or div
into an editor instance having the
specified ID.
Example:
tinyMCE.execCommand('mceAddControl',false,'mydiv');
So when you clone a textarea there is another problem: You will have the same id twice which will result in errors accessing the right tinymce instance.
I got this to work by using an ID which is incremented each time my clone function is triggered, so
var insertslideID = 0;
function slideclone() {
$('<div class="slides"><textarea name="newslide['+insertslideID+'][slide_desc]" id="mydiv'+insertslideID+'"></textarea></div>').insertAfter('div.slides:last');
tinyMCE.execCommand('mceAddControl',false,'mydiv'+insertslideID);
insertslideID++;
}
$('input[name=addaslidebtn]').click(slideclone);
Seems to work.
A wee bit tidier, I just use a number for my id - copy1 is the name of my button - I add the new element to the end of my container.
var count = 0;
$("#copy1").click(function(){
var newId = count;
$( "#first" ).clone().appendTo( "#container" ).prop({ id: newId, });
tinyMCE.execCommand('mceAddControl',false,newId);
count++;
});
I ran into a similar problem, except my element IDs (not just textareas) could be anything, and the same ID was always appearing twice. What I did is supposed to be horribly inefficient but there was no noticeable performance loss with dozens of elements on the page.
Basically I removed the TinyMCE ID first (uses jQuery):
$(new_element).find('.mce-content-body').each(function () {
$(this).removeAttr('id');
});
Then I reinitialized TinyMCE for all relevant elements.

Categories