Javascript 使用jQuery动态删除单选按钮

我在使用删除单选按钮时遇到问题，我使用了（.remove）函数，但是当我使用它时，它会删除所有单选按钮，我想单独删除它们：请参见此处的演示

---

谢谢

您可以通过

id

或“class”或特定的

标记名来分隔单选按钮

，然后适当地选择并删除它们

比如：

$('input[type=radio].class_name').remove(); // delete with class_name
// or 
$('input[type=radio]#id_name').remove();  // delete with id_name
// or
$('input[type=radio][name=your_specific_name]').remove(); // delete with your radio button's specific name attribute.

$('input[type=radio]:eq(1)').remove(); //to remove your elements if they would occur in fixed specific order, or in case dynamic order deletion is fine.

OP评论更新

如果它们是动态生成的，它仍然可以完成，不知道你的动态语言是什么，但是在PHP中考虑，你可以这样做：

$('input[type=radio]#<?php echo $dynamic_id_variable; ?>').remove();

//or for javascript
$('input[type=radio]#'+ dynamic_id_variable ).remove();

$（'input[type=radio]#'）。删除（）；
//还是javascript
$（'input[type=radio]#'+动态id_变量）。删除（）；

它会删除所有单选按钮，因为如果它们具有相同的标签，则所有单选按钮都具有相同的ID…并且

$（“#after”）.children（）.remove（）删除所有子项，这意味着该分区中的所有单选按钮。。
根据您的功能更改代码

 $('input:radio:last').remove();

这应该能奏效。这将仅逐个删除最后添加的单选按钮要删除最后添加的单选按钮，您可以执行以下操作：

$('#RemoveButton').click(function(){
   $('#after').children().last().remove();
   $('#after').children().last().remove();
   $('#after').children().last().remove();
}); 

我添加了3行，因为您插入了一个单选按钮、一个标签和一个换行符。
你可以像这样把所有的东西放在一个div里：

function createRadioElement(elem, label, checked) {
    var id = 'option1_' + label;
    $('#after').append($('<div><input type="radio" name="option1" id="' + id + '" value="1" /><label for="' + id + '">' + label + '</label></div>'));
 }

$('#AddButton').click(function(){
    var x = document.getElementById('option').value;
    createRadioElement(this,$('#option').val());
}); 
$('#RemoveButton').click(function(){
   $('#after').children().last().remove();
}); 

函数createRadioElement（元素、标签、选中）{
变量id='选项1'+标签；
$（'#after'）。追加（$（''+标签+''）；
}
$（“#添加按钮”）。单击（函数（）{
var x=document.getElementById（'option'）。值；
createRadioElement（这个，$（'#选项'）.val（）；
}); 
$（“#移除按钮”）。单击（函数（）{
$（'#after'）.children（）.last（）.remove（）；
}); 
如果要删除所选收音机：

function createRadioElement(elem, label, checked) {
    var id = 'option1_' + label;
    $('#after').append($('<div><input type="radio" name="option1" id="' + id + '" value="1" /><label for="' + id + '">' + label + '</label></div>'));
 }

$('#AddButton').click(function(){
    var x = document.getElementById('option').value;
    createRadioElement(this,$('#option').val());
}); 
$('#RemoveButton').click(function(){
   $('#after').children().children("input[checked='checked']").parent().remove();
}); 

函数createRadioElement（元素、标签、选中）{
变量id='选项1'+标签；
$（'#after'）。追加（$（''+标签+''）；
}
$（“#添加按钮”）。单击（函数（）{
var x=document.getElementById（'option'）。值；
createRadioElement（这个，$（'#选项'）.val（）；
}); 
$（“#移除按钮”）。单击（函数（）{
$（'#after'）.children（）.children（“input[checked='checked']）.parent（）.remove（）；
}); 
我想我可以试试这个问题。我并不特别喜欢依赖ID，因为它们在理论上应该是唯一的，但你不能总是保证它。我喜欢保留对我添加到页面中的元素的引用，因为我可能希望在某个时候删除它们。下面的示例不允许重复选项，也不依赖ID（尽管我保留了标签输入关联）


这样做的好处是，您可以快速重建选项列表（比如，如果您想对它们进行排序），并且可以轻松地测试某个选项是否存在，而无需查找它。除了标签关联之外，实际上不需要使用任何id值。我保留了你的elem传球，即使我没看到你在用它

请注意，为了避免内存泄漏，我会小心地确保在移除任何元素后不会抓住它们。
我将一个变体放在一起演示几种技术。不幸的是，我上班迟到了，厕所到处都是，所以如果你有任何问题，请在这个答案下留言

HTML

我对
名称
s/
id
s以及添加/删除的工作方式做了一些更改。我认为这些
名称
/
id
更加一致和描述性，但您的里程数可能会有所不同

<input type="text" name="option" id="option" value="test"/>
<button id="add-option" data-role="button" data-inline="true">Add Option</button>
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose an Option:</legend>
        <div id="options"></div>
    </fieldset>
</div>

Javascript/jQuery

很多好东西，包括缓存、变量函数、更自然的处理程序、克隆元素而不是为每个函数调用创建一个新元素等等。我还添加了一个检查，以确保我们添加/创建的无线电在DOM中不存在

$(document).ready(function(){

    var $radio = $('<input type="radio" name="options[]">'),
        $remove = $('<button>x</button>'),
        $label = $('<label>'),
        $span = $('<span>'),
        $option = $('input[name=option]'),
        $addbutton = $('#add-option'),
        $options = $('#options'),
        aregex = new RegExp(/[^a-zA-Z0-9 ]+/g),
        spregex = new RegExp(/[ ]+/g),
        optpre = 'option_';

    var addRadioOption = function(){

        var checkRadioExists = function(){
            var text = $option.val(),
                id = text.replace(aregex,'').replace(spregex,'_').toLowerCase(),
                id = optpre + id,
                opt = document.getElementById(id);

            if (!opt && id != '' && text != '') {
                return createRadioElement(id, text);
            }

            return false;
        };

        var createRadioElement = function(id, text) {
            var $label_clone = $label.clone(),
                $span_clone = $span.clone(),
                $radio_clone = $radio.clone(),
                $remove_clone = $remove.clone();

            var removeRadioOption = function(){
                $label_clone.remove();
            };

            $remove_clone.click(removeRadioOption);

            $radio_clone.val(text).attr('id', id);
            $span_clone.text(text);
            $label_clone.append($radio_clone, $span_clone, $remove_clone);

            return $options.append($label_clone).has($label_clone);
        };

        return checkRadioExists();
    };

    $addbutton.click(addRadioOption);

});

$（文档）.ready（函数（）{
变量$radio=$（''），
$remove=$（'x'），
$label=$（''），
$span=$（''），
$option=$（'input[name=option]'），
$addbutton=$（“#添加选项”），
$options=$（“#options”），
aregex=新的RegExp（/[^a-zA-Z0-9]+//g），
spregex=newregexp（/[]+/g），
optpre=‘选项’；
var addRadioOption=函数（）{
var checkRadioExists=函数（）{
var text=$option.val（），
id=text.replace（aregex，”）.replace（spregex，“"”）.toLowerCase（），
id=optpre+id，
opt=document.getElementById（id）；
如果（！opt&&id！=''&&text！=''）{
返回createRadioElement（id，文本）；
}
返回false；
};
var createRadioElement=函数（id，文本）{
var$label\u clone=$label.clone（），
$span_clone=$span.clone（），
$radio\u clone=$radio.clone（），
$remove_clone=$remove.clone（）；
var removeradioption=函数（）{
$label_clone.remove（）；
};
$remove\u clone.单击（removeadoop）；
$radio_clone.val（text.attr（'id'，id））；
$span_clone.text（text）；
$label\u clone.append（$radio\u clone、$span\u clone、$remove\u clone）；
返回$options.append（$label\u clone）.has（$label\u clone）；
};
返回checkRadioExists（）；
};
$addbutton。单击（addRadioOption）；
});

< P> < /P>动态生成如何对每个生成的ID设置不同的ID，如果它们是动态生成的，那么它仍然可以完成，不知道你的动态语言是什么，但是在PHP中考虑，你可以这样做：->代码> $[（输入[type =无线电）''）。代码>它工作得很好，但是我想删除选中的单选按钮，用户选择的任何一个，它可能在开始、中间、结束？在这种情况下，您应该执行：
$（'#after'）.children（）.children（“input[checked='checked']）。parent（）.remove（）
这样，您可以选择选中的单选按钮，并删除父级（容器div）。记住将单选按钮和标签放在div！中！。让我们一起努力吧
$(document).ready(function(){

    var $radio = $('<input type="radio" name="options[]">'),
        $remove = $('<button>x</button>'),
        $label = $('<label>'),
        $span = $('<span>'),
        $option = $('input[name=option]'),
        $addbutton = $('#add-option'),
        $options = $('#options'),
        aregex = new RegExp(/[^a-zA-Z0-9 ]+/g),
        spregex = new RegExp(/[ ]+/g),
        optpre = 'option_';

    var addRadioOption = function(){

        var checkRadioExists = function(){
            var text = $option.val(),
                id = text.replace(aregex,'').replace(spregex,'_').toLowerCase(),
                id = optpre + id,
                opt = document.getElementById(id);

            if (!opt && id != '' && text != '') {
                return createRadioElement(id, text);
            }

            return false;
        };

        var createRadioElement = function(id, text) {
            var $label_clone = $label.clone(),
                $span_clone = $span.clone(),
                $radio_clone = $radio.clone(),
                $remove_clone = $remove.clone();

            var removeRadioOption = function(){
                $label_clone.remove();
            };

            $remove_clone.click(removeRadioOption);

            $radio_clone.val(text).attr('id', id);
            $span_clone.text(text);
            $label_clone.append($radio_clone, $span_clone, $remove_clone);

            return $options.append($label_clone).has($label_clone);
        };

        return checkRadioExists();
    };

    $addbutton.click(addRadioOption);

});