Question

在下面的代码中，当我按下相应的添加按钮时，我想删除相应的rem按钮。如果我按添加1，则应删除rem 1 ...所有这些都应该使用JQuery完成..有人请帮助我......

<html>
<head>
</head>
<body>
<input class="add" id="1" type="button" value="1"><br>
<input class="add" id="2" type="button" value="2"><br>
<input class="add" id="3" type="button" value="3"><br>
<input class="add" id="4" type="button" value="4"><br><br>

<input class="rem" id="r1" type="button" value="R1"><br>
<input class="rem" id="r2" type="button" value="R2"><br>
<input class="rem" id="r3" type="button" value="R3"><br>
<input class="rem" id="r4" type="button" value="R4"><br>
</body>
</html>

Answer 1

尝试这样的事情：

$('.add').click(function() {
    $('#r' + this.value).remove();
});

演示：http://jsfiddle.net/UE4w6/

请注意，我使用的是this.value而不是this.id，因为在旧浏览器中，以数字开头的ID可能不可靠。

顺便说一下，普通的javascript也很有趣：

document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('add') && e.target.nodeName == 'INPUT') {
        var rem = document.getElementById('r' + e.target.value);
        rem && rem.parentNode.removeChild(rem);
    }
}, false);

http://jsfiddle.net/UE4w6/1/

Answer 2

试试这个：

$('.add').click(function() {
    $('#r' + $(this).val()).remove();
});

Answer 3

请尝试使用此代码。

<html>
<head>
    <script src="http://code.jquery.com/jquery-2.0.3.js"></script>
    <script>
    $(function(){
        $('.add').on('click', function(){
            var id = $(this).attr('id');
            $('#r'+id).remove();            
        });
    });

    </script>
</head>
<body>
<input class="add" id="1" type="button" value="1"><br>
<input class="add" id="2" type="button" value="2"><br>
<input class="add" id="3" type="button" value="3"><br>
<input class="add" id="4" type="button" value="4"><br><br>

<input class="rem" id="r1" type="button" value="R1"><br>
<input class="rem" id="r2" type="button" value="R2"><br>
<input class="rem" id="r3" type="button" value="R3"><br>
<input class="rem" id="r4" type="button" value="R4"><br>
</body>
</html>

Answer 4

你可以这样做：

$('.add').on('click', function(){
    $('.rem[id$="'+this.value+'"]').remove();
});

Answer 5

试试这个。

HTML： -

 <input class="add" id="1" data-id="r1" type="button" value="1"><br>
 <input class="add" id="2" data-id="r2" type="button" value="2"><br>
 <input class="add" id="3" data-id="r3" type="button" value="3"><br>
 <input class="add" id="4" data-id="r4" type="button" value="4"><br><br>

 <input class="rem" id="r1" type="button" value="R1"><br>
 <input class="rem" id="r2" type="button" value="R2"><br>
 <input class="rem" id="r3" type="button" value="R3"><br>
 <input class="rem" id="r4" type="button" value="R4"><br>

jQuery： -

$(function(){
  $('.add').click(function(){
      $('#'+$(this).attr('data-id')).toggle(); // or use hide();
  });
});

演示：http://jsfiddle.net/8ugCy/

来自不同班级的按钮

5 个答案:

演示：http://jsfiddle.net/UE4w6/