无法从动态 jquery 表单中删除元素
Unable to remove an element from dynamic jquery form
我正在使用所见即所得的编辑器创建一个动态表单,它是这样的。
需要脚本
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
Html
<div id="p_scents">
<p>
<input type="text" name="title">
<textarea name="description[]" rows="20" cols="80"></textarea>
</p>
</div>
和jquery函数
$(function () {
var editors = {}; //Keep track of all added nicEditors for removal later
var scntDiv = $('#p_scents');
$(document).on('click', '#addScnt', function () {
var elm = $('<div class="con"><input type="text" id="Text1" value="" /></div>').appendTo(scntDiv);
var elm = $('<textarea NAME="description[]"></textarea>').appendTo(scntDiv); // Add the textarea to DOM
var curSize = $('textarea[name="description[]"]').length; //Get the current SIZE of textArea
editors[curSize] = new nicEditor().panelInstance(elm[0]); //Set the Object with the index as key and reference for removel
elm.after($('<a/>', { //Create anchor Tag with rel attribute as that of the index of corresponding editor
rel: curSize,
'class': "remScnt",
text: "Remove",
href: '#'
})).next().andSelf().wrapAll($('<p/>')); //add it to DOM and wrap this and the textarea in p
});
$(document).on('click', '.remScnt', function (e) {
e.preventDefault();
var elem = $(this).prev('textarea'); //Get the textarea of the respective anchor
var index = this.rel; //get the key from rel attribute of the anchor
editors[index].removeInstance(elem[0]); //Use it to get the instace and remove
delete editors[index]; //delete the property from object
$(this).closest('con').remove();
$(this).closest('p').remove(); //remove the element.
});
});
此脚本取自此堆栈溢出问题。
NicEdit html editor for managing dynamic add/remove textareas
对于这个脚本,我想附加一个文本字段作为标题,上面的脚本创建的是相同的,但是一旦创建,如果我按下删除按钮,它不会被删除,只有文本区域被删除,我在哪里出错了我该如何解决?
更新 fiddle 在这里 http://jsfiddle.net/eEUEW/34/
您可以使用 .parent()
和 .prev()
替换
$(this).closest('con').remove();
$(this).closest('p').remove();
与
$(this).parent().prev().remove();
$(this).closest('p').remove();
我正在使用所见即所得的编辑器创建一个动态表单,它是这样的。
需要脚本
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
Html
<div id="p_scents">
<p>
<input type="text" name="title">
<textarea name="description[]" rows="20" cols="80"></textarea>
</p>
</div>
和jquery函数
$(function () {
var editors = {}; //Keep track of all added nicEditors for removal later
var scntDiv = $('#p_scents');
$(document).on('click', '#addScnt', function () {
var elm = $('<div class="con"><input type="text" id="Text1" value="" /></div>').appendTo(scntDiv);
var elm = $('<textarea NAME="description[]"></textarea>').appendTo(scntDiv); // Add the textarea to DOM
var curSize = $('textarea[name="description[]"]').length; //Get the current SIZE of textArea
editors[curSize] = new nicEditor().panelInstance(elm[0]); //Set the Object with the index as key and reference for removel
elm.after($('<a/>', { //Create anchor Tag with rel attribute as that of the index of corresponding editor
rel: curSize,
'class': "remScnt",
text: "Remove",
href: '#'
})).next().andSelf().wrapAll($('<p/>')); //add it to DOM and wrap this and the textarea in p
});
$(document).on('click', '.remScnt', function (e) {
e.preventDefault();
var elem = $(this).prev('textarea'); //Get the textarea of the respective anchor
var index = this.rel; //get the key from rel attribute of the anchor
editors[index].removeInstance(elem[0]); //Use it to get the instace and remove
delete editors[index]; //delete the property from object
$(this).closest('con').remove();
$(this).closest('p').remove(); //remove the element.
});
});
此脚本取自此堆栈溢出问题。 NicEdit html editor for managing dynamic add/remove textareas
对于这个脚本,我想附加一个文本字段作为标题,上面的脚本创建的是相同的,但是一旦创建,如果我按下删除按钮,它不会被删除,只有文本区域被删除,我在哪里出错了我该如何解决?
更新 fiddle 在这里 http://jsfiddle.net/eEUEW/34/
您可以使用 .parent()
和 .prev()
替换
$(this).closest('con').remove();
$(this).closest('p').remove();
与
$(this).parent().prev().remove();
$(this).closest('p').remove();