Question

快速提问，如何修复js代码，以便在取消选中复选框后从ul.results中删除文本内容。奇怪的是，如果文本是所有简单的字母或数字，则在取消选中框时删除文本，但是带有的文本或任何括号，在取消选中复选框时文本不会被删除。我是一个新手，因为你可以肯定看到所以请温柔地对我和js小提琴将是一个答案的最佳选择，喜欢那个jsfiddle。以下是我要求解决方案的js fiddle。

<div class="box-checkbox-color">

        <input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" />
        <label for="sku0001-green"></label>
    <div style="display:none;" title="#" class="rawHTML-code-insert">ggg<b>THIS ONE NOT GETTING REMOVED with uncheck</b>ggg</div>
    </div>


<div class="box-checkbox-color">

        <input type="checkbox" name="Color:_Green2"  id="sku0001-green2" value="Yes" />
        <label for="sku0001-green2"></label>
        <div style="display:none;" title="#" class="rawHTML-code-insert">THIS ONE DOES???</div>
    </div>


<ul class="result"></ul>

使用Javascript：

$('input[type="checkbox"]').click(function(){
    var title = $(this).closest('.box-checkbox-color').find('.rawHTML-code-insert').html();
    // If the checkbox is checked, add the item to the ul.
    if($(this).attr('checked')){
        var html = $("<li/>", {
            title: title,
            text: title
        });
        $('ul.result').append(html);
    } else {     
        // if the checkbox is unchecked, remove the item from the ul.
        $('li[title="' + title + '"]').remove();
    }
});

Answer 1

你走了。 http://jsfiddle.net/ek2zh/154/

$('input[type="checkbox"]').click(function(){
    var title = $(this).closest('.box-checkbox-color').find('.rawHTML-code-insert').html();
    var tempId = $(this).attr('id');

    // If the checkbox is checked, add the item to the ul.
    if($(this).attr('checked')){
        var html = $("<li/>", {
            title: title,
            idholder: tempId,
            text: title
        });
        $('ul.result').append(html);
    } else {     
        // if the checkbox is unchecked, remove the item from the ul.
        $('[idholder="' + tempId + '"]','ul').remove();
    }
});

Answer 2

检查以下代码

<强> HTML

<div class="box-checkbox-color">

        <input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" />
        <label for="sku0001-green"></label>
        <div style="display:none;" title="#" class="rawHTML-code-insert">&lt;div class="box-checkbox-color"&gt;

        &lt;input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" /&gt;
        &lt;label for="sku0001-green"&gt;&lt;/label&gt;
    &lt;/div&gt;</div>
    </div>


<div class="box-checkbox-color">

        <input type="checkbox" name="Color:_Green2"  id="sku0001-green2" value="Yes" />
        <label for="sku0001-green2"></label>
        <div style="display:none;" title="#" class="rawHTML-code-insert">&lt;div class="box-checkbox-color"&gt;

        &lt;input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" /&gt;
        &lt;label for="sku0001-green"&gt;&lt;/label&gt;
    &lt;/div&gt;</div>
    </div>


<ul class="result"></ul>

<强> JS

$('input[type="checkbox"]').click(function(){
    var title = $(this).closest('.box-checkbox-color').find('.rawHTML-code-insert').html();
    // If the checkbox is checked, add the item to the ul.
    if($(this).attr('checked')){
        var html = '<li title="' + title + '">' + title + '</li>';
        $('ul.result').append(html);
    } else {     
         var html = '';
        $('ul.result').html(html);
    }

});

点击此处Fiddle

取消选中复选框应该删除附加的html但是

2 个答案: