时间戳

首页 > 解决方案 > 一个一个删除下拉列表，同时添加

jquery - 一个一个删除下拉列表，同时添加

问题描述

这是一种逐个删除下拉列表的方法吗？

我正在使用 jquery 在 div 中创建和附加带有按钮的下拉列表，该按钮用于删除下拉列表。

要求：

  1. 能够一一删除下拉列表。

这是一个显示问题的片段：

$(document).ready(function() {
  $("#btnAddItem").click(function(){
    var text = $('#ddl_device_option').val();  
    if(text == "device_1"){
      $('#dvTable').append('<font face="Arial" size="4"> </font>&nbsp;');
      $('#dvTable').append(text);
      $('#dvTable').append(' <select id="test"> <option>1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select> ');

      var i = "1";
      $('#dvTable').append('<input type="button" id='+ i +' value="x" class="btn btn-danger" >');
    } else if(text == "device_2") {
      $('#dvTable').append('<font face="Arial" size="4"> </font>&nbsp;');
      $('#dvTable').append(text);
      $('#dvTable').append(' <select> <option id="1">1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select> ');
      
      var i = "2";
      $('#dvTable').append('<input type="button" id='+ i +' value="x" class="btn btn-danger">');
    } else if(text == "device_3"){
      $('#dvTable').append('<font face="Arial" size="4"> </font> &nbsp;');
      $('#dvTable').append(text);
      $('#dvTable').append(' <select> <option>1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select> ');
      var i = "3";
      $('#dvTable').append('<input type="button" id='+ i +' value="x" class="btn btn-danger">');
    }
  }); 
});
  
 
$( "#dvTable" ).click(function() {
  //  alert("clicked");
  $(this).remove(); // it will remove entire div
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="itemOptions" class="panel panel-info">

  <div >
     &nbsp;&nbsp;&nbsp; 
     <font face="Arial" size="4" >Select Device:</font>
    &nbsp;&nbsp;&nbsp;

    <select id="ddl_device_option">
      <option id="1">device_1</option>
      <option id="2">device_2</option>
      <option id="3">device_3</option>
      <option id="4">device_4</option>
      <option id="5">device_5</option>
      <option id="6">device_6</option>
      <option id="7">device_7</option>
      <option id="8">device_8</option>
      <option id="9">device_9</option>
    </select>
  &nbsp;&nbsp;&nbsp; <input  id = "btnAddItem" type="button" value="+" class="btn btn-warning"> 
  </div>
</div>

<div id="dvTable">

</div>

标签： jqueryhtml

解决方案

您的代码有两个问题。首先是您的点击事件在错误的元素上触发：

$( "#dvTable" ).click(function() {
  //  alert("clicked");
  $(this).remove(); // it will remove entire div
});

这将导致任何点击#dvTable删除。#dvTable这显然不是你想要的。

但是，简单地将click事件添加到#dvTable > input[type=button]选择器将无法正常工作。你构建新元素的方式意味着你的动态 HTML 是错误的。

我已将您的 HTML 输出修改为：

var newElement;   
newElement = '<div>';
newElement += '<font face="Arial" size="4">&nbsp;' + text + '</font>'
newElement += '<select id="test"> <option>1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select>'
var i = "1";
newElement += '<input type="button" id='+ i +' value="x" class="btn btn-danger" >';
newElement += '</div>';
$('#dvTable').append(newElement);

这将为新元素构建文本并将其包装在div. 然后它一次将整个元素添加到#dvTable.

然后删除您添加的项目变得更加容易。然后您的代码变为：

$(document).on('click', '#dvTable > div > select + input[type=button]', function() {
  $(this).parent().remove();
});

本质上，当您单击under下的任何按钮时，它会删除父元素，即. 这会删除您之前添加的所有动态内容，而不仅仅是其中的一部分。div#dvTablediv

查看以下显示此内容的工作片段：

$(document).ready(function() {
  $("#btnAddItem").click(function(){
    var text = $('#ddl_device_option').val();  
    if(text == "device_1"){
      var newElement;
      
      newElement = '<div>';
      newElement += '<font face="Arial" size="4">&nbsp;' + text + '</font>'
      newElement += '<select id="test"> <option>1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select>'
      var i = "1";
      newElement += '<input type="button" id='+ i +' value="x" class="btn btn-danger" >';
      newElement += '</div>';
      
      $('#dvTable').append(newElement);
    }
  }); 
});
  
 
$(document).on('click', '#dvTable > div > select + input[type=button]', function() {
  $(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="itemOptions" class="panel panel-info">

  <div >
     &nbsp;&nbsp;&nbsp; 
     <font face="Arial" size="4" >Select Device:</font>
    &nbsp;&nbsp;&nbsp;

    <select id="ddl_device_option">
      <option id="1">device_1</option>
      <option id="2">device_2</option>
      <option id="3">device_3</option>
      <option id="4">device_4</option>
      <option id="5">device_5</option>
      <option id="6">device_6</option>
      <option id="7">device_7</option>
      <option id="8">device_8</option>
      <option id="9">device_9</option>
    </select>
  &nbsp;&nbsp;&nbsp; <input  id = "btnAddItem" type="button" value="+" class="btn btn-warning"> 
  </div>
</div>

<div id="dvTable">

</div>

注意：我从代码中删除了device_2和，以向您展示此工作的示例。您可以根据我在此处提供的代码修复这些问题。device_3

推荐阅读