Javascript 在JQuery中单击单选按钮后如何附加节？

问题出在这里。我需要在用户单击单选按钮后附加一个节。然后，如果用户单击这个新的附加部分中的单选按钮，我需要附加另一个部分。我的代码不起作用。我做错了：（感谢你的帮助

<section class="input_1">
<input type="datetime-local"><br/>
<input id="add_1" type="radio" value="1" name="q1">yes
<input id="del_1" type="radio" value="0" name="q1" >no
<br />
</section>


$(document).ready(function() {
 var max_fields = 2;
 var x = 1;

 $(document).on("click", "#add_1", function(e) {
 e.preventDefault();
 if (x < max_fields) {
  x++;
  $(".input_1").append('<section class="input_2">-.-.-<br/><input type="datetime-local"><br /> 
<input type="datetime-local"><br/>
<input id="add_2" type="radio" value="1" name="q2">yes
<input id="del_2" type="radio" value="0" name="q2" >no
</section>');
  })
 }
 });
});

$(".input_1").on("click", "#del_1", function(e) {
  e.preventDefault();
  $(this).parent('section').remove();
  x--;
  })
 });

//level 2
$(document).ready(function() {
 var max_fields_2 = 2;
 var x = 1;

  $(document).on('click', '.add_2', function(e) {
  e.preventDefault();
  var wrapper_2 = $(".input_2");
  if (x < max_fields_2) {
  x++;
  $(wrapper_2).append('<section>-.-.-<br/><input type="datetime-local"><a href="#" class="del_2">Remove</a><br /> <button class="add_3">return 2</button> </section>');
   $(wrapper_2).on("click", ".del_2", function(e) {
    e.preventDefault();
    $(this).parent('section').remove();
    x--;
   })
  }
  });
 });

对
不


$（文档）.ready（函数（）{
var max_字段=2；
var x=1；
$（文档）。在（“单击”上，“添加1”，函数（e）{
e、 预防默认值（）；
如果（x



对
不
');
})
}
});
});
$（“.input_1”）。在（“单击”，“删除1”，函数（e）{
e、 预防默认值（）；
$（this.parent（'section'）.remove（）；
x--；
})
});
//二级
$（文档）.ready（函数（）{
var max_字段_2=2；
var x=1；
$（文档）。在（'单击'，'上。添加_2'，函数（e）{
e、 预防默认值（）；
变量包装器_2=$（“.input_2”）；
如果（x
return 2'）；
$（wrapper_2）.on（“click”，“.del_2”，函数（e）{
e、 预防默认值（）；
$（this.parent（'section'）.remove（）；
x--；
})
}
});
});

编辑根据vlk提供的解决方案，这里有一个代码的替代版本

 <input type="datetime-local"><br/>
 <input id="add_1" type="radio" value="1" name="q1" onclick="appendNewDiv()" ><label for="add_1">yes</label>
 <input id="del_1" type="radio" value="0" name="q1" onclick="removeDiv($(this))"> <label for="add_del">no</label>
  <br />
  <div class="container"></div>

JavaScript 
 var newDiv

 function appendNewDiv(){
  newDiv = '<div><p>This is a new div</p>';
  newDiv += '<label><input onclick="appendNewDiv()" '
  newDiv += 'type="radio">Add Another Div</label>'
  newDiv += '<label><input onclick="removeDiv($(this))" '
  newDiv += 'type="radio">Remove Div</label></div>'
  $('.container').append(newDiv);
 }

function removeDiv(radio){
  radio.closest('div').remove()
 }

对
不


JavaScript
var newDiv
函数appendNewDiv（）{
newDiv='这是一个新的div
'；
newDiv+=“添加另一个Div”
newDiv+=“删除Div”
$（'.container'）.append（newDiv）；
}
功能移除IV（收音机）{
radio.closest（'div'）.remove（）
}

试试这样简单的东西。 使用内联事件调用

onclick="yourFunction()"

在附加的div上，使其更智能，代码更少

像这样为新div创建一个变量

var newDiv = '<div>Hello</div>';

var newDiv='Hello'；

var-newDiv；
函数appendNewDiv（）{
newDiv='这是一个新的div
'；
newDiv+=“添加另一个Div”；
$（'.container'）.append（newDiv）；
}

添加Div

这是一个非常简单的代码！我将用它来代替“是”单选按钮。只缺少一件事-在选择“否”单选按钮后如何删除附加的div。你能帮我吗？需要创建另一个收音机，在removeDiv功能上触发onclick事件。在这里使用fiddle，我尝试了一下，效果很好，但我无法成功地将带有“删除”功能的单选按钮添加到带有“添加”功能的单选按钮旁边：（我还需要限制-即每个“添加”只能执行一次。我在上面添加了更新的代码。