Question

我希望在＆＃39; x＆＃39;时删除textarea。单击，x的id应与textarea相同。因此，如果我在第j行第3列有三个textareas并且我点击textarea下的x，则应删除与x的id匹配的文本区域

HTML Snip

<style>
    table, tr, td{
        border: 1px solid black;

    }
    textarea,select{
        display:block;
    }
</style>

<table>
    <tr class="_rows">

        <td valign="middle" align="center" height="56" class="side">Assay                                 
            <input type="hidden" value="5" name="tests[]">
        </td>

        <td valign="middle" align="center">
            <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
            <textarea placeholder="Input Value" class="det methods ui-autocomplete-input" value="" name="method_3[]" cols="10" rows="1" id="1" autocomplete="off">UV</textarea> <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
            <textarea placeholder="Input Value" class="det methods ui-autocomplete-input" value="" name="method_3[]" cols="10" rows="1" id="2" autocomplete="off">Titration</textarea> <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
            <textarea placeholder="Input Value" class="det methods ui-autocomplete-input" value="" name="method_3[]" cols="10" rows="1" id="3" autocomplete="off">Titrati</textarea>        
        </td>
        <td valign="middle" align="center">
            <textarea placeholder="Input Value" class="det" value="" name="compedia_3[]" cols="10" rows="1" id="1">Manufacturer's In - House Method</textarea>  
        </td>

        <td valign="middle" align="center">
            <textarea placeholder="Input Value" class="det" value="" name="specification_3[]" cols="10" rows="1" id="1">1.9  - 2.1 mg</textarea> 
            <textarea placeholder="Input Value" class="det" value="" name="specification_3[]" cols="10" rows="1" id="2">9.5 - 10.5 mg</textarea>
        </td>
        <td valign="middle" align="center" id="addinput">

            <textarea placeholder="Input Value" class="det" value="" name="determined_3[]" cols="10" rows="1" id="1"> Chlorpheniramine  2.0 mg,(RSD=1.0%,n=6)</textarea><a data-id="1" class="rem1" href="#remove-field-1">x</a> 
            <textarea placeholder="Input Value" class="det" value="" name="determined_3[]" cols="10" rows="1" id="2"> Pseudoephedrine Hydrochloride 10.1 mg,(RSD=0.6%,n=3)</textarea><a data-id="2" class="rem1" href="#remove-field-2">x</a> 
            <textarea placeholder="Input Value" class="det" value="" name="determined_3[]" cols="10" rows="1" id="3">Ammonium Chloride 50.9 mg, (RSD=0.3%,n=3)</textarea><a data-id="3" class="rem1" href="#remove-field-3">x</a>


        </td>
        <td valign="middle" align="center" class="side">

            <select selected="selected" class="det" name="complies_3[]" id="1">
                <option value="COMPLIES">COMPLIES</option>
                <option value="COMPLIES">COMPLIES</option>
                <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
                <option value=":">SPLIT</option>
            </select>

            <select selected="selected" class="det" name="complies_3[]" id="2">
                <option value="COMPLIES">COMPLIES</option>
                <option value="COMPLIES">COMPLIES</option>
                <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
                <option value=":">SPLIT</option>
            </select>

            <select selected="selected" class="det" name="complies_3[]" id="3">
                <option value="COMPLIES">COMPLIES</option>
                <option value="COMPLIES">COMPLIES</option>
                <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
                <option value=":">SPLIT</option>
            </select>


        </td>
    </tr>
</table>

jQuery Snip

$(document).on('click', '.rem1', function () {
    $id = $(this).attr('data-id');
    var $textarea = $(this).parent('td').find('textarea'); // up, back and down
    var id = $textarea.attr('id');
    alert($id + ' = ' + id)

    if ($id === id) {
        alert(1)
        id.fadeOut(function () {
            id.remove();
        });
    } else {
        // alert(0)
    }

});

以上代码没有这样做，有什么建议吗？

Answer 1

如果只是你不会改变html代码的结构，我的意思是你总是希望x删除它以前的textarea并且textarea将与x保持在同一列中，你可以使用.prev（selector）删除单击的x的前一个textarea

 $(this).prev("textarea").remove();
 $(this).remove();

http://jsfiddle.net/ygawqhpw/1/

Answer 2

请尝试使用以下代码：

$(document).on('click', '.rem1', function () {
    $id = $(this).attr('data-id');
    var $textarea = $('textarea#'+$id ); 
    $textarea.fadeOut(function () {
            $textarea.remove();
    });
});

从id获得data-id后，无需搜索所有文本区域。每个textarea都有自己唯一的ID，因此您可以使用jquery直接定位它。一旦你有它的参考，你可以淡出它并最终删除它。

从表td中删除textarea

2 个答案: