Question

我想创建DOM元素，其中包含从输入类型文本中获取的信息。更具体：我希望用户能够写一个位置，然后按下“Go！”按钮在插入文本时创建的元素，我还想要一个删除图标，当按下该按钮删除该插入时。

我创建了一个函数，我在其中获取了输入值，但我无法创建'del'按钮

如果我使用相同的方法在里面创建另一个<img>，当我创建第二个条目时，它会将另一个<img>放到上一个条目

 search_btn.click(function() {

    var place_reg = /^[a-z]+\d*[a-z]*(\s[a-z]+\d*[a-z]*)*?$/i;
    var search_value = search_box.val();
    var final_result = search_value.trim();

    if (place_reg.test(final_result)) {

        createDest(final_result);           

    } else {

        alert('Please insert a valid destination');
    }

    document.getElementById('search_box').value = "";
});

function toTitleCase(str) {

    return str.replace(/\w\S*/g, function(txt){ return txt.charAt(0).toUpperCase() + 
 txt.substr(1).toLowerCase();});
}

function createDest(value) {

    var destination_i_search = document.createElement("div");
    destination_i_search.innerHTML = toTitleCase(value);
    destination_i_search.setAttribute("class" , "place");       
    $("#dest").append(destination_i_search);            

}

Answer 1

如果没有完整的例子，很难理解你希望它做什么，但是从评论中你可能想要这样的东西：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/s6hn0n18/6/

我已将其转换为在适当的时候使用jQuery。

var search_btn = $('#search');
var search_box = $('#searchbox');

search_btn.click(function () {
    var place_reg = /^[a-z]+\d*[a-z]*(\s[a-z]+\d*[a-z]*)*?$/i;
    var search_value = search_box.val() || "";
    var final_result = search_value.trim();
    if (place_reg.test(final_result)) {
        createDest(final_result);
    } else {
        alert('Please insert a valid destination');
    }
    search_box.val("");
});

function toTitleCase(str) {
    return str.replace(/\w\S*/g, function (txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

function createDest(value) {
    // use a div container
    var div = $("<div/>");
    div.html(toTitleCase(value));
    div.addClass("place");
    // If you want to replace the previous entry
    $("#dest").append(div);
    var del = $('<input class="delete" type="button" value="X"/>');
    $("#dest").append(del);
}

// This is a delegated event handler, attached to a non-changing ancestor
$(document).on('click', '.delete', function(){
    // Remove the previous div (if of class place)
    $(this).prev('.place').remove();
    // Remove the delete button too
    $(this).remove();
});

关键是为删除按钮添加委托事件处理程序。这些工作通过侦听指定的事件（在这种情况下为click）冒泡到不变的祖先。应用了jQuery选择器。它为导致事件的任何匹配元素调用该函数。如果没有更接近变化内容的可用内容，则默认祖先为document。在这种情况下，您可以使用#dest

e.g。

$('#dest').on('click', '.delete', function(){

从输入类型创建元素=＆＃39; text＆＃39; JavaScript的

1 个答案: