JavaScript can't delete div from form

I am having an issue deleting or replacing a div with a either an empty div or a new veriosn of the div. I have tried to destroy the div with delete $targetname I've tried to replace the div with $("#divname").replace() and I seem to be missing some. I have the function tied to a button click that also clears a textarea and that part works fine but my form continues to show the divs that are getting appended but never removed. Below is the link to the fiddle for my code, any help is appreciated.

http://jsfiddle.net/fNfK8/

emWindow = window.open("", null, "height=400,width=800,status=yes,toolbar=no,menubar=no,location=no");


emWindow.document.title = "Emote Builder";
emWindow.document.body.style.background = "#00214D";
emWindow.document.body.style.color = "White";

// create a form and set properties
var emForm = document.createElement('form');
emForm.id = 'emForm';
// insert into the body of the new window
emWindow.document.body.appendChild(emForm);

// add text before the input
var emoteBuildL = document.createElement('emoteBuildL');
emForm.appendChild(document.createTextNode('Emote Build Window:'));

//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);

// add a text input
var emoteBuild = document.createElement('textarea');
emoteBuild.type = 'text';
emoteBuild.name = 'emoteBuild';
emoteBuild.id = 'emoteBuild';
emoteBuild.rows = 6;
emoteBuild.cols = 80;
emoteBuild.value = '';
emForm.appendChild(emoteBuild);

var emoteTosend = document.getElementById('emoteBuild');

//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);

var ePreview = document.createElement('button');
ePreview.type = 'button';
ePreview.innerHTML = 'Preview Emote';
ePreview.onclick = emoteFunc;

emForm.appendChild(ePreview);
var eSubmit = document.createElement('button');
eSubmit.type = 'button';
eSubmit.innerHTML = 'Send Emote';
eSubmit.onclick = function () {
    client.send_direct("" + emoteBuild.value);
};
emForm.appendChild(eSubmit);

var eClear = document.createElement('button');
eClear.type = 'button';
eClear.innerHTML = 'Clear Emotes';
eClear.onclick = function () {
    emoteBuild.value = '';
    delete $emPreviews;

};

emForm.appendChild(eClear);

//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);

// add text before the input
var emotePviewL = document.createElement('emotePviewL');
emForm.appendChild(document.createTextNode('Emote Previews:'));
//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);


//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);

function emoteFunc() {

    var emPreview = emoteBuild.value;
    emPreview = emPreview.replace(/%%(.+?)%%/g, "\<font color=\"red\"\>\"$1\"\</font\>");
    emPreview = emPreview.replace(/%%/g, "\"");
    emPreview = emPreview.replace(/\^/g, "");
    emPreview = emPreview.replace(/(\w+_him)/g, "(him/her)");
    emPreview = emPreview.replace(/(\w+_his)/g, "(his/her)");
    emPreview = emPreview.replace(/(\w+_he)/g, "(he/she)");
    emPreview = emPreview.replace(/#/g, "");
    var div = document.createElement("div");
    div.class = 'emPreviews';
    div.id = 'emPreviews';
    div.style.color = "black";
    div.style.backgroundColor = "white";
    div.innerHTML = emPreview;
    emForm.appendChild(div);
    emForm.appendChild(linebreak);
} 

Answers


You will find it very much more efficient to put the HTML into a separate file and use that as the source for the new window. Alternatively, use document.write to add content to the page, e.g. the following replaces about 20 lines at the start of your script:

function openWin() {
  var emWindow = window.open("", null, "height=400,width=800,status=yes");

  emWindow.document.write(
    '<!doctype html><title>Emote Builder<\/title>' +
    '<style type="text/css">body{background-color: #00214D;color:White;}<\/style>' +
    '<form id="emForm">' +
    'Emote Build Window:<br>' +
    '<textarea name="emoteBuild" id="emoteBuild" rows="6" cols="80"><\/textarea>'
  );
  emWindow.document.close();
}

Note that when you do:

var linebreak = document.createElement('br');

it creates an element in the current document, but then:

emForm.appendChild(linebreak);

appends it to an element in a different document. You really should do:

var linebreak = emWindow.document.createElement('br');
emForm.appendChild(linebreak);

Or just put it in the HTML above.

You are also creating a button in the opener window, appending it to the form, then having it call a function in the opener. The new window has a new global context, it doesn't have access to the opener's scope. You can do:

ePreview.onclick = window.opener.emoteFunc;

or similar but you might find that blocked in some browsers.

I'd suggest you re–write the function to firstly generate the HTML you want, then write it to a new window using emWindow.document.write. Don't forget to call emWindow.document.close at the end.

Edit

Remember that you are working across documents. So if you are still running the script in the opener (the original window), you have to preface any reference to methods in the child window with a reference to emWindow, e.g. to get a reference to the form in the child window you have to use:

function emoteFunc() {

    // Get a reference to the form in the child window
    var emPreview = emWindow.document.getElementById('emoteBuild');
    ...

    // Create a div in the child window to append to it
    var div = emWidnow.document.createElement('div');
    ...

    // The form and div are in the same document, so just append
    emForm.appendChild(div);

    // Create a BR element in the child and append it
    emForm.appendChild(emWindow.document.createElement('br'));
    ...
}
Edit 2

Here is a trivial example of sending data between a child and opener.

<script>

var win;

function newWin(){
    win = window.open('','','');

    win.document.write(
      '<title>new window<\/title>' +
      '<script>function getValue() {' +
      'document.getElementById("i0").value = opener.document.forms.f0.i0.value;}<\/script>' +
      '<input id="i0">' +
      '<input type="button" onclick="getValue()" value="Get value from opener">' +
      '<input type="button" onclick="opener.getValue()" value="Get value using function in opener">'
    );

    win.document.close();
};

function getValue() {
console.log('getValue called');
console.log(win.document.getElementById('i0').value);

  win.document.getElementById('i0').value = document.f0.i0.value;
}

function sendValue(value) {
  win.document.getElementById('i0').value = value;
}

</script>

<button onclick="newWin()">Open child</button>
<form id="f0">
  <p>Value to get from child
  <input name="i0" value="value in opener">
  <input type="button" value="Send value" onclick="sendValue(this.form.i0.value)">
</form>

You will discover that (in IE at least) you can:

  1. call a function in the child window to get a value from the opener
  2. call a function in the opener to send a value to the child
  3. call a function in one window from the other,

but you can't call a function in the other window that updates the current window, that's one too many hops.

So any function you want to call from the child should be in the child, and any function you want to call from the opener should be in the opener.


Need Your Help

String to Date Parse

c# datetime azure windows-phone-8.1

I have a problem. In Windows Phone 8.1 project this code works but in Windows Azure Cloud Services project won't work. This code get date from xml.

Keeping a native (C) pointer into an object instance — and cleaning it up afterwards

java c jni pam

For one of my projects, I want to implement a complete PAM implementation for Java (application side and module side as well).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.