Unable to read length and remove newly added element JQuery
Question
I have an ajax function to retrieve data which will be used for adding new input data via jQuery, i have successfully done it, but the problem is when i try to remove the div that wrapping the input data it always failed and when i try to print the length of the div it always return 0, i already make sure the div id is exist, here's my javascript code:
$('#checkmodule_listing_tabs_productattributes_section_content').on('change', '#page_category_id', function(event){
if($('#page_category_id').val() == ''){
return false;
}
$.ajax({
url : 'yolo.com',
type: 'get',
dataType: 'json',
showLoader:true,
success: function(data){
if(data!='failed'){
var attributes = data;
removeElement();
var i;
for(i = 0; i < attributes.length; i++){
ctr = i;
if(attributes[i].attributeType == 'sku'){
attributes[i].name = 'sku_'+attributes[i].name;
}
if((attributes[i].name != 'name') && (attributes[i].name != 'sku_SellerSku') && (attributes[i].name != 'quantity')) {
j=i+2;
appendClonedFormSelect('#attribute-magento0','#attribute-magento' + j,'page_attribute_magento'+(i+1),'New attribute','attribute_magento'+ j,'');
appendClonedFormInput('#attribute-custom0','#attribute-custom' + j,'page_custom_field'+(i+1),'New Custom','custom_field'+ j,'',0);
appendClonedFormInput('#attribute-name0','#attribute-name' + j,'page_label'+(i+1),attributes[i].label,'field_name'+ j,attributes[i].name,1);
}
}
} else{
alert('there are some isues when Retrieving Product Attributes');
}
}
});
})
function removeElement(){
$('#attribute-name'+0).remove();
var i = 2;
for(i=2;i<=20;i++){
console.log('#attribute-name'+i);
if ($('#attribute-name'+i).length > 0){
$('#attribute-name'+i).remove();
$('#attribute-custom'+i).remove();
$('#attribute-magento'+i).remove();
} else{
break;
}
}
}
function appendClonedFormInput(el,newId,newInputId,newLabelText,newName,newValue,type) {
// Clone and update id
var cloned = $(el).clone().attr('id', newId);
// Update label
cloned.find('label').attr('for', newInputId).text(newLabelText);
if(type == 1){
// Update input
cloned.find('input').attr('id', newInputId).attr('name', newName).val(newValue);
return $('#checkmodule_listing_tabs_productattributes_section_content').find('#page_base_fieldset').after(cloned);
}else{
// Update textarea
cloned.find('textarea').attr('id', newInputId).attr('name', newName).val(newValue);
return $('#checkmodule_listing_tabs_productattributes_section_content').find('#page_base_fieldset').after(cloned);
}
}
function appendClonedFormSelect(el,newId,newInputId,newLabelText,newName,newValue) {
// Clone and update id
var cloned = $(el).clone().attr('id', newId);
// Update label
cloned.find('label').attr('for', newInputId).text(newLabelText);
// Update input
cloned.find('select').attr('id', newInputId).attr('name', newName).val(newValue);
return $('#checkmodule_listing_tabs_productattributes_section_content').find('#page_base_fieldset').after(cloned);
}
Here's the partial html code:
<div id="checkmodule_listing_tabs_productattributes_section_content" style="" data-ui-id="lazada-listing-edit-tabs-tab-content-productattributes-section" aria-labelledby="checkmodule_listing_tabs_productattributes_section" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false">
<div class="entry-edit form-inline">
<fieldset class="fieldset admin__fieldset " id="page_base_fieldset">
<legend class="admin__legend legend">
<span>Product Attributes</span>
</legend>
<br>
<div class="messages">
</div>
<div class="admin__field field field-category_id with-addon required _required" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-category-id">
<label class="label admin__field-label" for="page_category_id" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-select-category-label"><span>Category</span></label>
<div class="admin__field-control control">
<div class="admin__field">
<select id="page_category_id" name="category" />
<label class="addafter" for="page_category_id">
</label>
</div>
</div>
</div>
<div class="admin__field field field-markup_price " data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-markup-price">
<label class="label admin__field-label" for="page_markup_price" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-markup-label"><span>Price</span></label>
<div class="admin__field-control control">
<input id="page_markup_price" name="markup" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-markup" value="" placeholder="Markup Price (%)" type="text" class=" input-text admin__control-text">
</div>
</div>
<div class="admin__field field field-fix_price no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-fix-price">
<div class="admin__field-control control">
<input id="page_fix_price" name="fix" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-fix" value="" placeholder="Fix Price" type="text" class=" input-text admin__control-text">
</div>
</div>
<div id="attribute-name0" class="admin__field field field-product_quantity " data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-product-quantity">
<label class="label admin__field-label" for="page_product_quantity" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-field-name0-label"><span>Quantity</span></label>
<div class="admin__field-control control">
<input id="page_product_quantity" name="field_name0" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-field-name0" value="sku_quantity" class="required-entry disabled input-text admin__control-text" readonly="1" type="text">
</div>
</div>
<div id="attribute-custom0" class="admin__field field field-custom_field0 no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-custom-field0">
<div class="admin__field-control control">
<textarea id="page_custom_field0" name="custom_field0" style="height:5em" rows="2" cols="15" class=" textarea admin__control-textarea" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-textarea-custom-field0"></textarea>
</div>
</div>
<div id="attribute-magento0" class="admin__field field field-attribute_magento0 no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-attribute-magento0">
<div class="admin__field-control control">
<select id="page_attribute_magento0" name="attribute_magento0" />
</div>
</div>
<div id="attribute-name1" class="admin__field field field-short_description " data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-short-description">
<label class="label admin__field-label" for="page_short_description" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-field-name1-label"><span>Highlight</span></label>
<div class="admin__field-control control">
<input id="page_short_description" name="field_name1" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-field-name1" value="short_description" class="required-entry disabled input-text admin__control-text" readonly="1" type="text">
</div>
</div>
<div id="attribute-custom1" class="admin__field field field-custom_field1 no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-custom-field1">
<div class="admin__field-control control">
<div class="admin__control-wysiwig">
<div id="buttonspage_custom_field1" class="buttons-set"><button type="button" class="scalable action-show-hide" style="" id="togglepage_custom_field1"><span><span><span>Show / Hide Editor</span></span></span></button><button type="button" class="scalable action-add-widget plugin" onclick="widgetTools.openDialog('http://builder.dev/manage/admin/widget/index/key/f05357775d038fa7e71c78037323cc88d7437c44ed1b383ae830ee22169b9732/widget_target_id/page_custom_field1')" style="display:none"><span><span><span>Insert Widget...</span></span></span></button><button type="button" class="scalable action-add-image plugin" onclick="MediabrowserUtility.openDialog('http://builder.dev/manage/cms/wysiwyg_images/index/key/d4ecee09ea5c1b73b254077e802d3a86cf551115ee3ecd179daf9f6886c40d65/target_element_id/page_custom_field1/')" style="display:none"><span><span><span>Insert Image...</span></span></span></button><button type="button" class="scalable add-variable plugin" onclick="MagentovariablePlugin.loadChooser('http://builder.dev/manage/admin/system_variable/wysiwygPlugin/key/22f12494a43d85e62780e90db3e000d405e0febc2a07b49513efc64421510272/', 'page_custom_field1');" style="display:none;"><span><span><span>Insert Variable...</span></span></span></button></div>
<textarea name="custom_field1" title="" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-wysiwyg-custom-field1" id="page_custom_field1" class="textarea" style="height: 5em; display: none;" rows="2" cols="15" aria-hidden="true"></textarea>
</div>
</div>
</div>
<div id="attribute-magento1" class="admin__field field field-attribute_magento1 no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-attribute-magento1">
<div class="admin__field-control control">
<select id="page_attribute_magento1" name="attribute_magento1" />
</div>
</div>
<div id="#attribute-magento2" class="admin__field field field-attribute_magento0 no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-attribute-magento0">
<div class="admin__field-control control">
<select id="page_attribute_magento1" name="attribute_magento2" /> </div>
</div>
<div id="#attribute-custom2" class="admin__field field field-custom_field0 no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-custom-field0">
<div class="admin__field-control control">
<textarea id="page_custom_field1" name="custom_field2" style="height:5em" rows="2" cols="15" class=" textarea admin__control-textarea" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-textarea-custom-field0"></textarea>
</div>
</div>
<div id="#attribute-name2" class="admin__field field field-product_quantity " data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-product-quantity">
<label class="label admin__field-label" for="page_label1" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-field-name0-label">Brand</label>
<div class="admin__field-control control">
<input id="page_label1" name="field_name2" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-field-name0" value="sku_quantity" class="required-entry disabled input-text admin__control-text" readonly="1" type="text">
</div>
</div>
<div id="#attribute-magento3" class="admin__field field field-attribute_magento0 no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-attribute-magento0">
<div class="admin__field-control control">
<select id="page_attribute_magento2" name="attribute_magento3"/>
</div>
</div>
<div id="#attribute-custom3" class="admin__field field field-custom_field0 no-label" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-custom-field0">
<div class="admin__field-control control">
<textarea id="page_custom_field2" name="custom_field3" style="height:5em" rows="2" cols="15" class=" textarea admin__control-textarea" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-textarea-custom-field0"></textarea>
</div>
</div>
<div id="#attribute-name3" class="admin__field field field-product_quantity " data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-form-field-product-quantity">
<label class="label admin__field-label" for="page_label2" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-field-name0-label">Model</label>
<div class="admin__field-control control">
<input id="page_label2" name="field_name3" data-ui-id="lazada-listing-edit-tab-productattributes-fieldset-element-text-field-name0" value="sku_quantity" class="required-entry disabled input-text admin__control-text" readonly="1" type="text">
</div>
</div>
/*and it goes on */
</fieldset>
</div>
</div>
1 answers
solution1
0 ACCPTED 2017-03-10 15:40:18
remove # from id being appended
appendClonedFormSelect('#attribute-magento0','#attribute-magento' + j,'page_attribute_magento'+(i+1),'New attribute','attribute_magento'+ j,'');
appendClonedFormInput('#attribute-custom0','#attribute-custom' + j,'page_custom_field'+(i+1),'New Custom','custom_field'+ j,'',0);
appendClonedFormInput('#attribute-name0','#attribute-name' + j,'page_label'+(i+1),attributes[i].label,'field_name'+ j,attributes[i].name,1);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JQUERY: Keep Class in last appended element and remove from all other newly added elements in a TABLE
Cannot remove the newly added items from a jQuery sortable list 2.0
Cannot remove the newly added items from a jQuery sortable list
unable to delete newly added rows on the table with dataTable jquery
How to refer to a newly added element in jquery and set CSS style
Add firstchild to newly added element
Getting the width of a newly added element
Jquery, Unable to Remove cloned element
How to remove jQuery element added by .append()?
How can I remove an element added by jquery?
Related Tags