Jquery onclick this remove both of span

Jquery onclick this remove both of span

本文关键字：of span both remove onclick this Jquery      更新时间：2023-09-26

当我点击"OnClick"时，如何删除City1和City2我的意思是想通过一次点击删除这两个。正在等待您的答复谢谢

<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/

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

在创建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);
});

这是一把小提琴

编辑：

以下是如何使用两个元素：

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

您必须克隆原始跨度，因为追加实际上会移动元素，所以追加两次是行不通的。

新小提琴

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

您只需要在之前清理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/

onClick="removeCity();"//add this as your onlick
var removeCity = function()
{
$("#City1").remove();
$("#City2").remove();
}

根据我的理解，这是您更新的小提琴：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>');

       });
   });

演示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();
       });
相关文章：