CODEWITHSUNDEEP
javascripttinymce
Tarjo
Tarjo

Reputation: 579

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: enter image description here

Upvotes: 0

Views: 6324

Answers (3)

Thariama
Thariama

Reputation: 50840

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.

Upvotes: 0

Hawken
Hawken

Reputation: 2119

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);
}

Upvotes: 1

BenjaminRH
BenjaminRH

Reputation: 12182

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);

Upvotes: 2

Related Questions