jqueryでdiv要素の表示非表示

waku1内のボタンをクリックする事で、waku1を非表示にして、waku2を表示したいのです。
waku2を非表示にすることはできたのですが、waku1が非表示になりません。
クリックしたボタンを含む、div要素を非表示するにはどうしたらよいのでしょうか？

ご指摘を受けたので、追記します。
同じクラスを利用しているdivが沢山あります。
今回記述したブロック内のwaku1のdivだけ非表示にしたいのです。

<script>
$(function(){
    $(".waku1").show();
    $(".waku2").hide();
    $(".waku3").hide();
    
    $('[name^=b_edit]').click(function(){
        $(this).parent().prev(".waku1").slideToggle();
        $(this).parent().next(".waku2").slideToggle();
    });
    $('[name^=b_cancel]').click(function(){
        $(this).parent().next().next(".waku3").slideToggle();
    });
    $('[name^=b_ok]').click(function(){
        $(this).parent().prev().prev(".waku1").slideToggle();
    });
});
</script>
</head>
<body>
<div class="waku1">
    <button name="b_edit" id="b_edit">ボタンA</button>
    <button name="b_cancel" id="b_cancel">ボタンB</button>
</div>
<div class="waku2">
    <p>表示1</p>
    <button name="b_ok" id="b_ok">ボタンC</button>
</div>
<div class="waku3">
    <p>表示2</p>
</div>

行動規範の内容に同意します

回答3件

このHTML構成なら別に$(this).parent().prevなどと辿らず直接$(".waku1")指定すれば良いのでは？

追記：
b_editの親が.waku1なので更にprevとかする必要ないのでは。
他にもparent()したうえでnextとかprevとかしてますが、汎用性に欠けるのでプログラムから扱いやすい構造を考えたほうが良さそうです。実際のアプリケーション次第ですが、同じ構造のグループが沢山あるならグループ毎にブロックにしてIDつけて、そのIDを指定するようにするとか。data属性も有用です。

投稿2020/11/06 04:02

編集2020/11/06 04:47