从input type ='text'创建元素JavaScript

Question

我想创建具有从输入类型文本获取的信息的DOM元素。更具体地说： 我希望用户能够写出一个位置，并在他按下“Go！”后按钮插入文本创建一个元素，我也想有一个删除图标，当按下删除该插入。

我创建了我把输入值的功能，但如果我创建另一个<img>内用同样的方法，当我创建的第二个条目就会把另一<img>我不能创建的“Del”键

与前一个条目

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

例如

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