Невозможно добавлять и удалять динамически сгенерированный выпадающий

Я хочу, чтобы генерировать динамические DropDown в следующем формате:Невозможно добавлять и удалять динамически сгенерированный выпадающий

<div class="row"> //first row containing 2 dynamic Dropdown 
       <div class="col-md-3 col-xs-12 col-sm-12 form-group"> 
       <select id="field1"> 
       </div> 
       <div class="col-md-3 col-xs-12 col-sm-12 form-group"> 
       <select id="field1"> 
       </div> 
</div> 
<div class="row"> //second row containing 2 dynamic Dropdown 
       <div class="col-md-3 col-xs-12 col-sm-12 form-group"> 
       <select id="field2"> 
       </div> 
       <div class="col-md-3 col-xs-12 col-sm-12 form-group"> 
       <select id="field2"> 
       </div> 
</div>

Etc ......

Выходной формат:

Примечание: Я хочу удалить кнопку в конце каждой строки

var cnt = 1; 
 
function AddRow() { 
 
     var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>"); 
 
     var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>"); 
 
     var fieldWrapper3 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>"); 
 
     var fieldWrapper4 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>"); 
 
     var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "' name='drpdownCourseNm" + cnt + "' />"); 
 
     var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "' name='drpdownSubCourseNm" + cnt + "' />"); 
 
     var fName3 = $("<select class='fieldname' id='drpdownSubject" + cnt + "' name='drpdownSubjectNm" + cnt + "' />"); 
 
     var removeButton = $("<img class='remove' src='../remove.png' />"); 
 

 
     fieldWrapper1.append(fName1); 
 
     fieldWrapper2.append(fName2); 
 
     fieldWrapper3.append(fName3); 
 
     fieldWrapper4.append(removeButton); 
 
     $("#FieldContainer").append(fieldWrapper1); 
 
     $("#FieldContainer").append(fieldWrapper2); 
 
     $("#FieldContainer").append(fieldWrapper3); 
 
     $("#FieldContainer").append(fieldWrapper4); 
 
     cnt = cnt + 1; 
 
    } 
 

 
    $(document).on('click', "img.remove", function() { 
 
     $(this).parent().fadeOut(1000, function() { 
 
      var id = $(this).attr("id").substr(5); 
 
      
 
      $(this).remove(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <div class="row" id="FieldContainer"> 
 
    </div> 
 
<a onclick="AddRow()" href="#">+ Add </a>

кнопка Удалить также не удаляя весь row.when я нажать на кнопку удалить, то только то, что весь ряд (2 Содержит выпадающий список) должны быть удалены.

источник

2015-10-09 Learning-Overthinker-Confused

Каково поведение в настоящее время? Вы можете отлаживать его из своего браузера. – artsylar

@Learning, вы хотите добавить и удалить строки. правильно? –

Вы хотите, чтобы все наборы выпадающих списков отображались в div с id 'FieldContainer'? –

Вы можете сделать это следующим образом:

http://jsfiddle.net/4gsnewbv/

Ваш JS:

....... 


    fieldWrapper1.append(fName1); 
    fieldWrapper2.append(fName2); 
    fieldWrapper3.append(fName3); 
    fieldWrapper4.append(removeButton); 
    var newRow = $('<div class="row" id=""></div>'); 


    $(newRow).append(fieldWrapper1); 
    $(newRow).append(fieldWrapper2); 
    $(newRow).append(fieldWrapper3); 
    $(newRow).append(fieldWrapper4); 
    $("body").append(newRow); // I am assuming it will be a direct child of body. If not, use the appropriate ID or Class 
......

Таким образом, каждый раз, когда вы добавить строку выпадающие, it'be вложенными внутри

<div class="row" id=""> 
    ...Your dropdowns and image goes here... 
</div>

Таким образом, во всем это похоже на

<body> 
    <div class="row" id=""> 
     ...Your dropdowns and image goes here... 
    </div> 

    <div class="row" id=""> 
     ...Your dropdowns and image goes here... 
    </div> 

    and so on...  

</body>

И затем используйте селектор jQuery closest, чтобы найти родителя с классом row и удалить эту конкретную строку.

$(document).on('click', "img.remove", function() { 
    $(this).closest(".row").fadeOut(1000, function() { //targets the entire row of dropdowns 
     var id = $(this).attr("id").substr(5); 

     $(this).remove(); 
    }); 
});

Edit: Если вы хотите новые строки перед вашим Add Button:

.... 
    $(newRow).insertBefore($(".add-more").parent()); 
....

источник

2015-10-09 05:28:33

Вместо этого: $ ("body"). append (newRow); Можно ли добавить перед моей кнопкой добавления, используя функцию insertbefore jquery? –

См. Здесь http://jsfiddle.net/4gsnewbv/1/ –

жаль беспокоить вас, но на самом деле моя кнопка такова:

+ Add

. –

var cnt = 1; 
 
function AddRow() { 
 
     var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>"); 
 
     var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>"); 
 
     var fieldWrapper3 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>"); 
 
     var fieldWrapper4 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>"); 
 
     var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "' name='drpdownCourseNm" + cnt + "' />"); 
 
     var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "' name='drpdownSubCourseNm" + cnt + "' />"); 
 
     var fName3 = $("<select class='fieldname' id='drpdownSubject" + cnt + "' name='drpdownSubjectNm" + cnt + "' />"); 
 
     var removeButton = $("<img class='remove' src='http://icons.iconseeker.com/png/fullsize/web-development-3/action-delete-sharp-thick.png' />"); 
 

 
     fieldWrapper1.append(fName1); 
 
     fieldWrapper1.append(fName2); 
 
     fieldWrapper1.append(fName3); 
 
    fieldWrapper1.append(removeButton.clone()); 
 
     
 
     $("#FieldContainer").append(fieldWrapper1); 
 
     $("#FieldContainer").append(fieldWrapper2); 
 
     $("#FieldContainer").append(fieldWrapper3); 
 
     $("#FieldContainer").append(fieldWrapper4); 
 
     cnt = cnt + 1; 
 
    } 
 

 
    $(document).on('click', "img.remove", function() { 
 
     $(this).parent().fadeOut(1000, function() { 
 
      var id = $(this).attr("id").substr(5); 
 
      
 
      $(this).remove(); 
 
     }); 
 
    
 
    }); 
 
AddRow();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <div class="row" id="FieldContainer"> 
 
    </div> 
 
<a onclick="AddRow()" href="#">+ Add </a>

источник

2015-10-09 05:32:45 Omidam81

Пожалуйста, смотрите изображение в моем вопросе –

да, я вижу его, обновленный. – Omidam81

По-прежнему ваш результат не такой, как ожидаемый формат –

Если вы хотите добавить строку с двумя выпадающие и кнопка удаления каждый раз, когда пользователь нажимает «Добавить», вы можете попробовать следующее. (https://jsfiddle.net/0npzqr1a/4/)

var cnt = 1; 
function AddRow() { 

     var rowWrapper = $('<div class="row" id="FieldContainer"></div>'); 

     var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12'/>"); 
     var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12'/>"); 
     var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "' name='drpdownCourseNm" + cnt + "' />"); 
     var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "' name='drpdownSubCourseNm" + cnt + "' />"); 
     var removeButton = $("<img class='remove' src='../remove.png' />"); 

     fieldWrapper1.append(fName1);  
     fieldWrapper2.append(fName2); 
     rowWrapper.append(fieldWrapper1); 
     rowWrapper.append(fieldWrapper2); 
     rowWrapper.append(removeButton); 

     $("#FieldContainer").append(rowWrapper); 
     cnt = cnt + 1; 
    } 

    $(document).on('click', "img.remove", function() { 
     $(this).closest('.row').fadeOut(1000, function() { 
      var id = $(this).attr("id").substr(5); 

      $(this).remove(); 
     }); 
    }); 

    $(document).on('click', "a#add", function() { 
     AddRow(); 
    });

И HTML,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="row" id="FieldContainer"> 
</div> 
<a id="add" href="#">+ Add </a>

источник

2015-10-09 05:45:28 artsylar

ваша скрипка не работает –

жаль, что я забыл нажать «Обновить». Не могли бы вы попробовать еще раз? – artsylar

Вы можете использовать шаблон HTML делать добавления и удаления элементов.

Для этого вам нужно просто создать html-шаблон для ваших нужд.

<script type="text/template" id="rowtemplate"> 
     <div class="select-row row"> 
      <div class="col-md-3 col-xs-12 col-sm-12 form-group"> 
       <select id="field1"></select> 
      </div> 
      <div class="col-md-3 col-xs-12 col-sm-12 form-group"> 
       <select id="field1"></select> 
      </div> 
      <div> 
       <a class="removeBtn">Remove</a> 
      </div> 
     </div> 
    </script>

Теперь вы можете просто добавить или удалить каждую строку.

Ваша функция добавить будет выглядеть следующим образом,

<script> 
    function AddRow() { 
     $('#FieldContainer').append($('#rowtemplate').html()); 
    } 
</script>

Вы можете видеть, что я упомянул имя класса для кнопки Удалить в шаблоне. Таким образом, мы можем просто обработать событие click для каждой кнопки удаления и удалить его элементы html.

$(document).ready(function() { 
    // click event for all remove button 
    $('body').on('click', '.removeBtn', function() { 
     $(this).closest('.select-row').remove(); 
    }); 
});

Вы можете видеть, как просто добавлять и удалять, когда вы используете шаблон html. Тогда почему вы должны пойти другими способами.

Надеюсь, это вам поможет. Если у вас есть какие-либо вопросы, прокомментируйте.

источник

2015-10-09 05:46:22

Невозможно добавлять и удалять динамически сгенерированный выпадающий

ответ

Смежные вопросы