JavaScript无法从表格中删除div

Question

I am having an issue deleting or replacing a div with a either an empty div or a new veriosn of the div. 我在删除div或将其替换为空div或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. 我试图用delete $ targetname破坏div我试图用$（“＃divname”）。replace（）替换div，但我似乎缺少了一些。 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. 我将功能绑定到按钮单击上，该按钮也可以清除文本区域，并且该部分效果很好，但是我的表单继续显示已追加但从未删除的div。 Below is the link to the fiddle for my code, any help is appreciated. 以下是我的代码的小提琴的链接，我们将为您提供任何帮助。

http://jsfiddle.net/fNfK8/ 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);
}

Answer 1

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. 您会发现将HTML放入一个单独的文件并将其用作新窗口的源非常有效。 Alternatively, use document.write to add content to the page, eg the following replaces about 20 lines at the start of your script: 或者，使用document.write将内容添加到页面，例如，以下内容替换了脚本开头的约20行：

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. 或者只是将其放在上面的HTML中。

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 . 我建议您重写该函数，以首先生成所需的HTML，然后使用emWindow.document.write将其写入新窗口。 Don't forget to call emWindow.document.close at the end. 不要忘记最后调用emWindow.document.close 。

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 , eg to get a reference to the form in the child window you have to use: 因此，如果您仍在打开程序（原始窗口）中运行脚本，则必须在子窗口中对方法的任何引用都以对emWindow的引用开头，例如，要在子窗口中获得对表单的引用，您必须采用：

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 编辑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: 您将发现（至少在IE中）您可以：

call a function in the child window to get a value from the opener 在子窗口中调用函数以从打开器获取值
call a function in the opener to send a value to the child 在打开器中调用一个函数向孩子发送一个值
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. 因此，您希望从子代调用的任何函数都应该在子代中，而您想从打开器调用的任何函数都应该在子代中。

JavaScript无法从表格中删除div

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-06-30 02:21:51

Edit 编辑

Edit 2 编辑2

JavaScript无法从表格中删除div

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-06-30 02:21:51

Edit 编辑

Edit 2 编辑2

解决方案1
0 已采纳 2014-06-30 02:21:51