Q:

Не удаляются строки jquery

По клику на #addRow добавляется строка, в которой по клику на .remove эта строка должна удалиться, но удаление не происходит. Не могу разобраться в чём проблема http://jsfiddle.net/hteqLoaw/

$(document).ready(function() {

  $('#addRow').on('click', function(event) {
    $('#directions .section-row:last').after('<div class="section-row"><div class="f-element horizontal"><div class="f-label">Направление:</div><div class="f-control group"><select class="f-select"><option>Россия</option><option>Не Россия</option></select><a href="#" class="g-button remove">1</a></div></div></div>');

    event.preventDefault();
  });


  $('.section-row').on('click', '.remove', function(event) {
    $(this).parents('.section-row').remove();
    event.preventDefault();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="g-container" id="directions">
  <div class="section-row">
    <div class="f-element horizontal">
      <div class="f-label">Направление:</div>
      <div class="f-control group">
        <select class="f-select">
          <option>Россия</option>
          <option>Не Россия</option>
        </select>
        <a href="#" class="g-button add" id="addRow">2</a>
      </div>
    </div>
  </div>
</div>

A:

Обработчик click для удаления надо навешивать на существующий элемент.

$(document).ready(function() {

  $('#addRow').on('click', function(event) {
    $('#directions .section-row:last').after(`
    <div class="section-row">
      <div class="f-element horizontal">
        <div class="f-label">Направление:</div>
        <div class="f-control group">
          <select class="f-select">
            <option>Россия</option>
            <option>Не Россия</option>
          </select>
          <a href="#" class="g-button remove">1</a>
        </div>
      </div>
    </div>
    `);

    event.preventDefault();
  });


  //$('.section-row').on('click', '.remove', function(event) {
  $("#directions").on('click', '.section-row .remove', function(event) {
    $(this).parents('.section-row').remove();
    event.preventDefault();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="g-container" id="directions">
  <div class="section-row">
    <div class="f-element horizontal">
      <div class="f-label">Направление:</div>
      <div class="f-control group">
        <select class="f-select">
          <option>Россия</option>
          <option>Не Россия</option>
        </select>
        <a href="#" class="g-button add" id="addRow">2</a>
      </div>
    </div>
  </div>
</div>

