Question

我有一个按钮<button onclick="takedown()"> take down </button>创建一个H1和按钮，文本字段中包含文本的id，h1在末尾为h1，按钮在按钮上有按钮onclick { {1}}。这就是那个功能

onclick="delete()"

对于删除功能，只有当按钮的id和h1是一个单词时，remove（）才有效。

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


}

有没有人知道什么是错的，或者如果它有两个字的id，如何使用JQuery来删除它。

Answer 1

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

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

How string.replace() works

Answer 2

首先，如果用户输入单词“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

以外的选择器

Answer 3

由于你正在使用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将内容居中，而不是使用中心。

我也重构了你的功能。传递你的价值要好得多，这样，这个功能更具灵活性和可测试性

Answer 4

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

JQuery remove（）不使用两个单词id

4 个答案: