Question

当我点击“OnClick”将删除城市和城市2时如何做到这一点我的意思是想通过一次点击删除它们。等待你的回复感谢。

<select multiple="multiple" id="city" >
<option value="First" >First</option>
<option value="Second" >Second</option>
<option value="Third" >Third</option>
</select>
<div id="City1"  ></div>
<div id="City2"  ></div>

  $(document).ready(function()
{
 var i = 0;

    $("#city").click(function(){
        var sel=$(this).val();  

         i++;

        $('#City1, #City2').append('<span id="'+ [i] +'"style="border-radius:5px;color:#fff;background-color:#005e3a;padding:5px;cursor:pointer;width:auto;" onclick="$(this).remove();">'+ sel +'</span>');


});

    });

http://jsfiddle.net/zeynaloffnet/WRs86/2/

Answer 1

你只需要先清理div。在.append（）

之前使用.empty（）

<select multiple="multiple" id="city" >
<option value="First" >First</option>
<option value="Second" >Second</option>
<option value="Third" >Third</option>
</select>
<div id="City1"  ></div>
<div id="City2"  ></div>

$(document).ready(function()
{
    var i = 0;
    $("#city").click(function(){
        var sel=$(this).val();
        i++;
        $('#City1, #City2').empty().append('<span id="'+ [i] +'"style="border-radius:5px;color:#fff;background-color:#005e3a;padding:5px;cursor:pointer;width:auto;" onclick="$(this).remove();">'+ sel +'</span>');
    });
});

http://jsfiddle.net/guinatal/WRs86/3/

Answer 2

Demo Fiddle

如果您要替换内容，请将append更改为html

       $('#City1, #City2').html('<span id="' + [i] + '"style="border-radius:5px;color:#fff;background-color:#005e3a;padding:5px;cursor:pointer;width:auto;">' + sel + '</span>');

要仅在单击其中一个时删除span个元素，请取出onclick功能并替换为

       $('#City1 span, #City2 span').on('click',function () {
           $('#City1 span, #City2 span').remove();
       });

Answer 3

onClick="removeCity();"//add this as your onlick

var removeCity = function()
{
$("#City1").remove();
$("#City2").remove();
}

Answer 4

根据我的理解，这是您的更新小提琴：http://jsfiddle.net/kailashyadav/WRs86/7/

$(document).ready(function () {
       var i = 0;

       $("#city").click(function () {
           var sel = $(this).val();

           i++;

           $('#City1, #City2').append('<span class="spanClass" id="' + [i] + '"style="border-radius:5px;color:#fff;background-color:#005e3a;padding:5px;cursor:pointer;width:auto;" onclick="$(\'.spanClass\').remove();">' + sel + '</span>');


       });

   });

Answer 5

我知道你已经得到了答案，但我认为值得指出一些事情。

在创建DOM元素时，您可以考虑使用对象文字语法，在那里像往常一样创建元素，然后使用键/值对添加其属性：

$('<div'>, { class: 'myDiv'});

ID不能以数字开头。可能值得将选项的值附加到前缀：

id: "opt-" + this.value,

将新版本设为特定课程，然后通过从单独的样式表中进行定位来改变其外观，这是一个好主意。这将消除所有丑陋且难以维护的内联CSS。

这些更改会为您提供以下内容：

span {
    border-radius:5px;
    color:#fff;
    background-color:#005e3a;
    padding:5px;
    cursor:pointer;
    width:auto;
}

<select multiple="multiple" id="mySelect">
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
</select>
<div id="result"></div>

$("#mySelect").click(function () {
    var span = $("<span />", {
        id: "opt-" + this.value.toLowerCase(),
        class: "city",
        text: this.value,
        click: function () {
            $(this).remove();
        }
    });

    $('#result').html(span);
});

这里是fiddle

修改：

以下是您如何使用两个元素进行操作的方法：

$("#mySelect").click(function () { var span1 = $("<span />", { class: "opt-" + this.value.toLowerCase(), text: this.value, click: function () { $(this).remove(); } }), span2 = span.clone(true); $('#result').empty().append(span1).append(span2); });

您必须克隆原始范围，因为追加实际上会移动元素，因此将其追加两次将无法正常工作。

New fiddle

我还将id属性更改为class，因为ID应该是页面唯一的。

Jquery onclick这删除了两个span

5 个答案:

Demo Fiddle