web-dev-qa-db-ja.com

jQueryでonclick（削除ボタン自体を含む）要素を削除する

私のように見えるいくつかの質問があることを知っていますが、この場合、削除ボタンも削除してほしいのですが、どうすればよいのかわかりません。

これが私の質問です。

追加ボタンをクリックすると、jQueryで3つの要素が追加されます。削除ボタンを含みます。

この削除ボタンを使用して、自分自身と他の2つの要素を削除します。カウンターは同じIDにする必要がありますが、jQueryでこれを正しく行ったかどうかはわかりません。

削除ボタンonclickを含む3つの要素を削除するにはどうすればよいですか？

$(function() {
var counter = 0;

  $('a').click(function() {
  $('#box').append('<input type="checkbox" id="checkbox" + (counter) + "/>');
  $('#box').append('<input type="text" id="t1" + (counter) + "/>');
  $('#box').append('<input type="button" value="." id="removebtn" + (counter) + "/>');
  $("#box").append("<br />");
   $("#box").append("<br />");
     counter++;
     });

$('removebtn').click(function() {
remove("checkbox");

});
});

前もって感謝します

jquerybuttonappend
15
Opoe

私の提案はこのようになります。

$(function () {
    var counter = 0;

    $('a').click(function () {
        var elems = '<div>'+
              '<input type="checkbox" id="checkbox"' + (counter) + '" class="item"/>' + 
              '<input type="text" id="t1"' + (counter) + '"/>' +
              '<input type="button" class="removebtn" value="." id="removebtn"' + (counter) + '"/>' +
        '</div>';
        $('#box').append(elems);
        $("#box").append("<br />");
        $("#box").append("<br />");
        counter++;
    });

    $('.removebtn').live(function () {
        $(this).parent().remove();   
    });
});

簡単なデモ

20
Reigel

削除ボタンのIDが＃removebtn1234であるとします。その後

$("#removebtn1234").click(function(){
    $(this).remove();
});

うまくいくはず

ただし、複数のアイテムを簡単に操作できるように、次のように変更することをお勧めします。

$('a').click(function() {
  $('#box').append('<input type="checkbox" data-id="' + counter + '"/>');
  $('#box').append('<input type="text" data-id="' + counter + '"/>');
  $('#box').append('<input type="button" value="." class="removebtn" data-id="' + counter + '"/>');
  $("#box").append("<br /><br/>");
  counter++;
});

$(".removebtn").click(function(){
   var id = $(this).data("id");
   $("*[data-id=" + id + "]").remove();
});
5
xandy

ここに解決策があります（それは必要以上に厄介なようですが、指を置くことができません）。

_$(function() {
    var counter = 0;

    $('a').click(function() {

        var checkBox = $('<input type="checkbox" id="checkbox' + (counter) + '"/>'),
            textBox = $('<input type="text" id="t1' + (counter) + '"/>'),
            removeButton = $('<input type="button" value="." id="removebtn' + (counter) + '"/>'),
            containerDiv = $("<div />");

        removeButton.click(function(e) {
            e.preventDefault();
            containerDiv.remove();
        });

        containerDiv
            .append(checkBox)
            .append(textBox)
            .append(removeButton);

        counter++;

        $("#box").append(containerDiv);
    });
});
_

このソリューションでは、jQuery参照の変数を作成します。このようにして、checkBox.remove()のようなものを呼び出すことができ、そのチェックボックスのみを参照します（URLを計算することはありません）。

少し変更して_<br />_タグを削除し、すべてを_<div />_で囲みました。この方法では、コンテナーdivを削除するだけで、すべての要素が移動します。

例： http://jsfiddle.net/jonathon/YuyPB/

4
Jonathon Bolster