删除并通过电台添加div

Question

当我选择答案"no"该文本框出现的情况。如果我改变主意，我会选择"yes"文本框消失。但如果我再次更改为"no"文本框不再出现...

我在哪里犯错？

Fiddle Demo

var numAdd = 1; 
var add = function() { 
    if (numAdd >= 2) return; 
    $('#skoki').append('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
    numAdd++; 
}; 

function hideByClass(className) { 
    $("."+className).remove(); 
}; 

Answer 1

你也可以做到这一点通过下面的代码

$(document).on('click', 'input.inp-rad', function(){ 
 
\t \t if($(this).attr('data-val') == 'No'){ 
 
\t \t \t \t $('#skoki').html('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
 
    }else{ 
 
    \t \t $('#skoki').html(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Do you like stack Overflow? If "No" tell me why.<br> 
 
<input type="radio" name="a" class="inp-rad" data-val="Yes"><label>Yes</label> 
 
<input type="radio" name="a" class="inp-rad" data-val="No"><label>No</label> 
 
<div id="skoki" class="blueBox"></div>

Answer 2

您删除刚刚输入自己的父元素来代替。你应该做的是删除孩子，或者干脆清除HTML。你也有一个条件，不允许再次添加输入。所以，你需要重置回1，以便在加回输入

var numAdd = 1; 
 
var add = function() { 
 
    if (numAdd >= 2) return; 
 
    $('#skoki').append('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
 
    numAdd++; 
 
}; 
 

 
function hideByClass(className) { 
 
    $("."+className).html(''); 
 
    numAdd = 1; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Do you like stack Overflow? If "No" tell me why.<br> 
 
<input type="radio" name="a" onclick="hideByClass('blueBox');"><label>Yes</label> 
 
<input type="radio" name="a" onclick="add()"><label>No</label> 
 
<div id="skoki" class="blueBox"> 
 
    </div>

Answer 3

原因： - 。你在你的hideByClass()功能删除整个DIV所以第二次add()不工作，因为$('#skoki')是未定义的。

只需做如下图所示： -

function add() { 
 
    $('.blueBox').html('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
 
}; 
 

 
function hideByClass(className) { 
 
    $("."+className).html(''); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Do you like stack Overflow? If "No" tell me why.<br> 
 
<input type="radio" name="a" onclick="hideByClass('blueBox');"><label>Yes</label> 
 
<input type="radio" name="a" onclick="add()"><label>No</label> 
 
<br> 
 
<div id="skoki" class="blueBox"></div>

Answer 4

var numAdd = 1; 
 
var add = function() { 
 
    $('#skoki').append('<div class="blueBox"><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
 
    
 
}; 
 

 
function hideByClass(className) { 
 
    $("."+className).remove(); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Do you like stack Overflow? If "No" tell me why.<br> 
 
<input type="radio" name="a" onclick="hideByClass('blueBox');"><label>Yes</label> 
 
<input type="radio" name="a" onclick="add()"><label>No</label> 
 
<div id="skoki"> 
 
    </div>

Answer 5

我已经改变你的代码一点点以下和它的作品。

Do you like stack Overflow? If "No" tell me why.<br> 
<input type="radio" name="a" onclick="hideByClass('input');"><label>Yes</label> 
<input type="radio" name="a" onclick="openByClass('blueBox')"><label>No</label> 
<div id="skoki" class="blueBox"> 
    </div> 

你的JavaScript

function hideByClass(className) { 
    $("."+className).remove(); 
}; 

function openByClass(className){ 
    $("."+className).append('<div class="input"><input type="text" name="2" style="width: 300px; height: 35px;" /></div>'); 
};