我正在嘗試刪除 2 個特定的內(nèi)容，具體取決于我按的刪除按鈕這是相關(guān)代碼：<!--HTML--><button type="button" class="collapsible">Gérer les formules</button><div class="form-group content"><br /> <button type="button" class="ajout-formule"><i class="fas fa-plus-circle"> Ajouter une formule</i></button> <div class="panel-body add-formule"> </div></div>// Javascript// add formule$('body').on('click', '.ajout-formule', function() { const $formule = $('<div>').addClass('div-formule'); const $ligne_formule = $('<div>').addClass('ligne-formule'); const $btn_formule = $('<th>'); const $tableau_formule = $('<table class="table" id="formule">'); const $head_formule = $('<thead>'); const $tr_formule = $('<tr>'); $btn_formule.append('<button type="button" class="btn spr-champs"><i class="fas fa-trash"></i></button>'); $btn_formule.append('<button class="btn nbr-champs" type="button"><i class="fas fa-sort-numeric-down"></i></button>'); $btn_formule.append('<button class="btn list-champs" type="button"><i class="far fa-list-alt"></i></button>'); $btn_formule.append('<input type="number" name="champs" id="champs" class="form-control pull-left" value="0"/>'); $tr_formule.append('<th><input type="text" name="titre-formule" id="titre-formule" class="form-control pull-left" /></th>'); $tr_formule.append('<th style="width:16px;padding-bottom: 16px;"><i class="fas fa-equals"></i></th>'); $tr_formule.append($btn_formule); $head_formule.append($tr_formule); $tableau_formule.append($head_formule); $ligne_formule.append('<label class="panel-heading">Introduisez la formule : </label>'); $ligne_formule.append($tableau_formule);});});這確實按預(yù)期工作，但這不是我想要的這是它的作用：每次我按下字段上方的“刪除”按鈕時，它只會刪除整個字段這就是我想要的：根據(jù)我按下的刪除按鈕，刪除該特定的 th，同時刪除它旁邊的“操作員”th這是我想要的屏幕：這是如何使用該代碼片段的屏幕：
2 回答
撒科打諢
TA貢獻1934條經(jīng)驗 獲得超2個贊
您想要使用 jQuery 變量$(this)來選擇單擊的按鈕。使用 parent()向上遍歷DOM。使用next()獲取下一個元素，或使用prev()獲取從 DOM 中的該點開始的上一個元素。
我做了一個簡單的例子來說明我的意思：
$('button').on('click', function(){
// Shows the button that was clicked on
// console.log($(this));
// Use parent to capture whole div
var wrapper = $(this).parent();
// Delete the previous 'deleteme', if no element is found, it does nothing
wrapper.prev('.deleteMe').remove();
// Delete first span after wrapper
wrapper.next('span').remove()
// Delete wrapper
wrapper.remove();
});
.wrapper {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<button id="1">Button 1</button>
<p>Things that get deleted on button 1</p>
</div>
<span>Item that also will be deleted on button 1</span>
<p class="deleteMe">Item before that button 1 doesn't have</p>
<div class="wrapper">
<button id="2">Button 2</button>
<p>Things that get deleted on button 2</p>
</div>
<span>Item that also will be deleted on button 2</span>
猛跑小豬
TA貢獻1858條經(jīng)驗 獲得超8個贊
找到解決方案：
// del field
$('body').on('click', '.spr-champs', function(event) {
var th_spr = $(this).parent();
var num_th = th_spr.parent().children(1).index($(this).parent());
if (num_th == 2)
{
if (th_spr.next('th'))
{
th_spr.next('th').remove();
}
th_spr.remove();
}
else
{
th_spr.prev('th').remove();
th_spr.remove();
}
});
1）找到它是哪一個var num_th = th_spr.parent().children(1).index($(this).parent());
2) 做一個簡單的 if -> 如果它是第一個按鈕：刪除該字段及其運算符next，否則：刪除該字段及其運算before符
- 2 回答
- 0 關(guān)注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消