0

我有一个按钮<button onclick="takedown()"> take down </button>，它创建一个 H1 和按钮，在我的文本字段中使用文本的 id 和 h1 在最后的 h1 和按钮在按钮的最后，按钮有一个 onclick onclick="delete()"。就是这个功能

    function takedown(){

note = document.getElementById("noteinput").value;

idh1 = note + "h1";
idbutton = note + "button";
idcenter = note + "center";

$('<center id="' + idcenter + '"> <h1 id="' + idh1 + '">' + note + '</h1> <button id="'+ idbutton +'" onclick="deletenote()"> Delete </button> </center>').appendTo("body");


}

对于删除功能，remove() 仅在按钮的 id 和 h1 是一个单词时才有效。

function deletenote(){
    // First setting
    var idbuttondelete = event.target.id;
    var idh1delete = idbuttondelete.replace("button", "h1");
    // Removing the button, h1,center
     $('#' + idbuttondelete).remove();
     $('#' + idh1delete).remove();

}

如果有两个词的 id，有谁知道什么是错的或如何使用 JQuery 删除某些东西。

4

4 回答 4

2

这不会像预期的那样运行，因为 ID 属性值不能包含空格。用下划线或其他允许的字符替换空格：

// don't forget VAR or you will have a global variable (bad)
var note = document.getElementById("noteinput").value.replace(/\s/g, '_');

string.replace() 如何工作

于 2013-11-06T21:31:25.617 回答
0

首先，如果用户输入单词“button”、“center”或“h1”，则删除功能中的替换将失败，因为删除中的 javascript 替换仅适用于第一个实例。为了防止用户有空格，请使用您拥有的删除功能尝试以下操作：

function takedown(){
    var note = document.getElementById("noteinput").value;

    var idh1 = "h1" + note.replace(/\s/g, '_');
    var idbutton = "button" + note.replace(/\s/g, '_');
    var idcenter = "center" + note.replace(/\s/g, '_');
    //the above 3 variables will use _ instead of space

    $('<center id="' + idcenter + '"> <h1 id="' + idh1 + '">' + note + '</h1> <button id="'+ idbutton +'" onclick="deletenote()"> Delete </button> </center>').appendTo("body");
}

如果您无法控制 ID 并且需要对很多对象执行此操作，您可以一次更改它们（在这种情况下为按钮）

$('button').each(function () {
    var id = $(this).attr('id');
    id = id.replace(/\s/g, '_');
    $(this).attr('id', id);
});

然后您可以使用 _ 而不是空格按 ID 引用所有按钮。否则按照其他人的建议执行并使用 ID 以外的选择器

于 2013-11-06T21:41:36.130 回答
0

由于您使用的是 jQuery，因此您可以尝试以下操作：

var note = $("#noteinput").val().replace(/\s/g, '_');

idcenter = note + "center";

$('<center id="' + idcenter + '"> <h1>' + note + '</h1> <button id="'+ idbutton +'" onclick="deletenote(idcenter)"> Delete </button> </center>').appendTo("body");
}

function deletenote(id){
     $('#' + id).remove();
}

您不需要单独删除标签的子元素。我还建议不要使用中心标签，使用 div 并使用 CSS 将内容居中而不是使用中心。

我还重构了你的功能。传递您的值要好得多，这样，函数更可重复使用和可测试

于 2013-11-06T21:49:37.740 回答
0

正如其他答案中提到的...... ids 中的空格是不好的做法！
但是，如果您确实需要在您的 id 中使用“两个词”，而不是查询选择器$，您可以使用：-
document.getElementById("doesnt mind spaces").remove();

于 2013-11-06T21:52:25.393 回答