如何使用 Javascript/Jquery 添加子元素
[英]How to add child element using Javascript/Jquery
問題描述
我需要一個幫助。 我需要使用 Javascript/Jquery 中的按鈕單擊添加子元素。我在下面解釋我的代碼。
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;" onclick="addMore();">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
</div>
<script>
function addMore(){
$('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname" placeholder="Label Name" value="">');
}
</script>
在這里我需要，最初是一個文本字段和+按鈕。 當用戶單擊第一個文本字段下方的加號（ + ）按鈕時，將創建一個具有不同 id（ ie-introlabelname2 ）的新文本字段，並創建一個加號、減號按鈕，第一個文本字段將保留減號按鈕。 假設用戶將單擊第二個文本字段的減號按鈕，該特定字段將被刪除，並且加號按鈕將保留在第一個文本字段中，依此類推。 這是我的plunkr 代碼。 請幫我。
4 個解決方案
解決方案1
3 2016-10-15 07:14:09
我認為這應該有幫助
使用您要求的“+”“-”按鈕進行編輯：
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <h1>Hello</h1> <div class="form-group" id="intro-box"> <input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control" id="introlabelname0" name="introlabelname" placeholder="Label Name" value=""> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(1);"> </div> <script> function addMore(i) { $("#plus").remove(); $('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' + '<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' + '<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>'); } function removeThis(j) { $("#introlabelname" + j).remove(); $("#minus" + j).remove(); } </script> </body> </html>
解決方案2
2 2016-10-15 07:23:46
同樣的事情，使用.clone() 。 請注意對 HTML 的更改以添加一個div ，該div將要克隆的元素標識為“模板”並刪除您的 onclick
function init() { $(document).on('click', '.btn-success', function() { var clone = $('#template').clone(); $('#intro-box').append(clone); clone.find('.btn-danger').show(); }); $(document).on('click', '.btn-danger', function() { $(this).parent().remove(); }); } $(init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="form-group" id="intro-box"> <div id="template"> <input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value=""> <input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;"> <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;"> </div> </div> </body>
解決方案3
0 2016-10-15 07:06:20
使用.ready() ，在.ready()處理程序中定義addMore函數； 將.click()替換為屬性事件處理程序onclick ； 將click事件附加到#minus元素； 檢查.length的"[name=introlabelname]"在兩者的點擊元素#plus ， #minus元件; 將布爾結果傳遞給.toggle() #minus按鈕，如果元素.length在#minus按鈕上單擊時不大於1 ； 單擊#minus元素時刪除最后一個"[name=introlabelname]"元素； 用class="form-control introlabelname"代替id="introlabelname"
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello</h1>
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
</div>
<script>
// Code goes here
$(function() {
function toggle() {
$("#minus").toggle($("[name=introlabelname]").length > 1);
}
function addMore() {
$('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">');
toggle()
}
function removeOne() {
$("[name=introlabelname]").last().remove()
toggle()
}
$("#plus").click(addMore);
$("#minus").click(removeOne)
})
</script>
</body>
</html>
解決方案4
-1 2016-10-15 07:04:30
閱讀這個http://www.w3schools.com/howto/howto_js_todolist.asp
現在您想創建一個具有不同 id 的輸入字段，您可以設置一個新變量來執行此操作。
例如：
一個腳本標簽：
var n=1;
另一個腳本標簽：
document.getElementByid("btn").addEventListener("click",add(),false);
function add(){
var id="identity"+n.toString();
//converts n to string and adds it to identity
document.getElementByTagName("div").innerHTML+="<input type='text' id='"+id+"'/>";
n++;
}
我沒有測試這段代碼。 但是你嘗試類似的東西。
如何在純 Javascript 而非 jQuery 中向具有 ul 子元素的 li 元素添加類
[英]How to add a class to li element which has a ul child element in pure Javascript not jQuery
如何使用jQuery將樣式表和javascript文件動態添加到div元素
[英]how to dynamically add stylesheet and javascript files to a div element using jquery
如何檢查元素的父元素本身是否是使用javascript或jquery的最后一個子元素
[英]How to check if the parent element of an element is in itself the last child with javascript or jquery
如何判斷一個元素是否是JavaScript中另一個元素的子元素（沒有jQuery）？
[英]How to tell if an element is a child of another element in JavaScript (no jQuery)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何使用jQuery和JavaScript將類添加到元素？
如何使用 Javascript 將 Class 添加到父元素的子元素
如何在純 Javascript 而非 jQuery 中向具有 ul 子元素的 li 元素添加類
如何使用jQuery或Javascript添加元素
如何使用jQuery將樣式表和javascript文件動態添加到div元素
如何檢查元素的父元素本身是否是使用javascript或jquery的最后一個子元素
如何判斷一個元素是否是JavaScript中另一個元素的子元素（沒有jQuery）？
如何使用JQuery使子元素的內容可編輯
如何使用jQuery檢測子元素？
如何使用jQuery選擇單個子元素？
相關標簽