Question

我想删除点击事件上的列现在问题是当我点击数字2时它会删除第二列它现在正常然后我点击数字3删除数字3但不是它的列代码是

这里有什么不对，任何人都可以帮我弄清楚。

＆＃13;

$(document).on('click',".button", function( event){
	var attrNumColumn = $(this).attr('attrnum');
  $(".button[attrnum='"+attrNumColumn+"']").remove();
  //console.log($(this).attr('attrnum'));
  var attrNumColumnMinus = parseInt($(this).attr('attrnum')-1);
  $('tr').each(function(){
  	$(this).children("td:eq("+attrNumColumnMinus+")").remove();
  });
});

＆＃13;

.button {
  height: 25px;
  width: 10px;
}

.button:hover {
  color: #c30202;
  cursor:pointer;
}

＆＃13;

<div class="button" attrnum='1'> 1 </div>
<div class="button" attrnum='2'> 2 </div>
<div class="button" attrnum='3'> 3 </div>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>

＆＃13;

Answer 1

使用$(".button").index(this)获取按钮的索引，然后使用该数字删除正确的td。

我还缩短了你的代码。

$(document).on('click',".button", function( event){
    var number = $(".button").index(this)
    $(this).add("tr td:nth-child(" + (number + 1) + ")").remove() // credit to Endless for this line
});

＆＃13;

$(document).on('click', ".button", function(event) {
  var number = $(".button").index(this)
  $(this).add("tr td:nth-child(" + (number + 1) + ")").remove()
});

＆＃13;

.button {
  height: 25px;
  width: 10px;
}

.button:hover {
  color: #c30202;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="button" attrnum='1'> 1 </div>
<div class="button" attrnum='2'> 2 </div>
<div class="button" attrnum='3'> 3 </div>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

＆＃13;

Answer 2

您的函数无效，因为您假设tr的长度始终相同而不管节点移除，因此当您移除第二个元素时，td in tr's的长度将变为2并且移除attrnum='3'它会尝试访问不存在的3-1 td [2]。我已经更新了你的代码，请看一下。

$(document).on('click',".button", function( event){
	var attrNumColumn = $(this).attr('attrnum');
  $(".button[attrnum='"+attrNumColumn+"']").remove();
  //console.log($(this).attr('attrnum'));
  $('tr').each(function(){
  	$(this).children("td[attrnum='"+attrNumColumn+"']").remove();
  });
});

.button {
  height: 25px;
  width: 10px;
}

.button:hover {
  color: #c30202;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button" attrnum='1'> 1 </div>
<div class="button" attrnum='2'> 2 </div>
<div class="button" attrnum='3'> 3 </div>

<table>
  <tr>
    <td attrnum='1'>1</td>
    <td attrnum='2'>2</td>
    <td attrnum='3'>3</td>
  </tr>
  <tr>
    <td attrnum='1'>4</td>
    <td attrnum='2'>5</td>
    <td attrnum='3'>6</td>
  </tr>
  <tr>
    <td attrnum='1'>7</td>
    <td attrnum='2'>8</td>
    <td attrnum='3'>9</td>
  </tr>
</table>

Answer 3

尝试以下javascript代码：

    <div class="button" attrnum='1'> 1 </div>
<div class="button" attrnum='2'> 2 </div>
<div class="button" attrnum='3'> 3 </div>

<table>
  <tr>
    <td class="col-1">1</td>
    <td class="col-2">2</td>
    <td class="col-3">3</td>
  </tr>
  <tr>
    <td class="col-1">4</td>
    <td class="col-2">5</td>
    <td class="col-3">6</td>
  </tr>
  <tr>
    <td class="col-1">7</td>
    <td class="col-2">8</td>
    <td class="col-3">9</td>
  </tr>
</table>

$(document).on('click',".button", function( event){
    var attrNumColumn = $(this).attr('attrnum');
  $('.col-'+attrNumColumn).remove();  
});

参见工作示例：https://jsfiddle.net/9p77afc3/10/

如果您想删除号码，请尝试：https://jsfiddle.net/9p77afc3/11/

使用jquery删除列无法正常工作

3 个答案: