Question

我在删除单选按钮时出现问题，我使用了（.remove）功能，但是当我使用它时会删除所有单选按钮，我想删除它们：在这里看一个演示{{3} } 感谢

Answer 1

您可以按id或“类”或特定tag names分隔您的单选按钮，然后相应地选择它们并删除它们。

喜欢：

$('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();

Answer 2

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

这应该可以解决问题。这将逐个删除最后添加的单选按钮

Answer 3

它会删除所有这些因为所有单选按钮具有相同的ID，如果它们具有相同的标签...并且$('#after').children().remove();删除所有子节点，这意味着该div中的所有单选按钮。根据您的功能更改代码

Answer 4

我整理了一个变体来演示几种技巧。不幸的是，我上班迟到，并且厕所遍布整个地方，所以如果你有任何问题，请在这个答案下留言。

<强> HTML

我对name s / id以及添加/删除的工作方式进行了一些更改。我认为这些names / 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>

<强> CSS

样式的一些变化，我认为它看起来更好。

#options label {
    display: block;
}
#options label span {
    padding-left: 5px;
    padding-right: 5px;
}
#options label button {
    border: 1px solid #aaa;
    border-left: 1px solid #9b9b9b;
    border-bottom: 1px solid #9b9b9b;
    background: #ddd;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 1px;
    position: relative;
    top: -5px;
}

<强>使用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);

});

http://jsfiddle.net/EMqa6/

Answer 5

要删除最后一个单选按钮，您可以执行以下操作：

$('#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();
});

Answer 6

如果要删除所选的电台：

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();
});

Answer 7

以为我会解决这个问题。我并不特别喜欢依赖于ID，因为理论上它们应该是独一无二的，但你不能总是保证它。我喜欢保留对我添加到页面中的元素的引用，因为我可能希望在某些时候删除它们。这是一个不允许重复选项并且不依赖于ID的示例（尽管我保留了您的标签输入关联）。

http://jsfiddle.net/z8dRJ/1/

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

请注意，我谨慎地确保在删除它们之后不保留任何元素以避免内存泄漏。

使用jQuery动态删除单选按钮

7 个答案: